TS与React中的路由表

最新推荐文章于 2025-01-26 11:28:27 发布
原创 最新推荐文章于 2025-01-26 11:28:27 发布 · 495 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #typescript

博客围绕TS与React中的路由表展开，记录了‘Search’表示值却用作类型的报错。参考js+react项目创建路由表却报错，经查看其他ts+react项目发现，routes下应为index.tsx而非index.ts，原因可能是js可随意用组件，而ts只能用tsx。

TS与React中的路由表

错误记录

“Search”表示值，但在此处用作类型。是否指“类型 Search”
image.png

错误分析

看起来很莫名其妙的报错，这个路由表是参考着一个js+react的项目创建的，明明看起来结构都是一样的，为什么会有这种报错呢？
后来翻了一下其他的ts+react的项目，才发现，routes下面的是index.tsx而不是index.ts，而js+react项目中的是index.js，这就很离谱了。
是因为js里面可以随便使用组件，但是ts下面不能乱用，所以只能使用tsx？

Taoika
关注
在 React 应用中，怎么封装一个路由权限
读心悦
06-09 1295
请注意，上述示例中的权限检查逻辑是非常基本的，并且假设权限状态存储在localStorage中。在实际应用中，你可能需要从服务器获取权限信息，并使用更复杂的逻辑来验证用户权限。组件外，你还可以使用高阶组件（HOC）或渲染道具（Render Props）模式来实现路由权限控制。接下来，你需要创建一个受保护的路由组件，该组件会包裹你的路由，并根据权限检查的结果来决定是否渲染该路由的组件。），它封装了权限检查的逻辑，并返回一个布尔值或用户角色/权限列表。组件，以便对需要权限的路由进行保护。
React系列：嵌套路由的使用
乐于分享，共同成长
12-17 492
React系列：嵌套路由的使用
TypeScript学习笔记之数据类型
长歌的博客
12-18 2970
布尔值： let flag:boolean=true/false; 数字： let num:number=3; 字符串： let s:string="me"/'me'/`me`; 可以用双引号（" "）或者单引号(' ')表示字符串，同时还可以使用模板字符串(` `)。 模板字符串可以定义单行或者多行，可以通过${expr}这种方式嵌入表达式，推荐这种方式 let name...
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
WJLcomeon的博客
10-13 3090
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
react使用表格加确认弹框
qq_36262295的博客
02-01 885
import React, { Component } from 'react' import { Button, Table, Modal, Space } from 'antd'; import { getAxios, delAxios } from '../../api/request.js' import { ExclamationCircleOutlined } from '@ant-design/icons'; const { confirm } = Modal; export default
React6---配置路由表
weixin_44085020的博客
03-28 2718
1.在src/page中创建路由组件 注：其中，Login和Main为并列路由， Analyse，Manage，Sign 为Main的子路由： Main > Analyse + Manage + Sign Login 2.在src/route下创建路由表index.js 步骤： 1.引入路由组件 2.引入Navigate实现重定向 3.创建并暴露路由表 具体代码如下： import Main from "../pages/Main"; import Analyse from "../page
react+ts【项目实战一】配置项目/路由/redux
weixin_46738453的博客
02-16 3403
return (发现音乐我是downLoad的插槽{useRoutes(routes)}
如何搭建TS的React项目router6
weixin_43867229的博客
04-19 402
router6的时候反而不适用了于是用下文。
【React+ts】 react项目中引入bootstrap、ts中的接口
最新发布
weixin_43872912的博客
01-26 1329
react组件的传参和懒加载
使用 TypeScript 在 React JS 中进行路由
技术探索驿站
08-13 1143
单页应用程序 (SPA) 中的路由支持在视图之间导航，而无需重新加载应用程序。React Router 是 React 应用程序中路由的标准库。本文简要概述了使用 TypeScript 设置路由的方法。
react+ts+vite项目 路由的搭建 （route v6）
qq_44754016的博客
04-20 4652
用来操作浏览器历史栈， 主要是可以用来封装路由前置守卫和后置守卫， vue有自己的路由守卫钩子， react是需要依赖history自己封装的， 关于路由守卫的封装另开一篇讲解。2、 在app.tsx 文件中改造一下html结构， 本质上就是利用数组循环出Route，简化书写嵌套Route， 增减路由只需维护RouteConfig文件里的配置内容即可。需要注意， 路由最好使用懒加载，节省效率， 所以对以上代码改造一下，最终呈现如下。悄咪咪放个链接，讲history的，不了解的可以看看~
react学习笔记-5：react路由
snipercai的博客
03-07 754
react学习，路由
React复习（11）：React-Router
愤怒的小火柴人
03-07 659
随着react的版本逐步更新，逐渐衍生出一个新的路由库React Router，直至现在，该路由库已经成为官方认证的路由库了。
一、ts语法基础 数据类型
m0_45382009的博客
02-14 2597
1. 安装 npm i -g typescript 2. 编译 编译一个ts文件，开发react后缀 .tsx 命令：tsc hello.ts 含义：将ts文件转成js文件，如果有ts语法错误，会报错，但是仍然会生成js文件，我们仍然可以使用这个js文件； 如果想要在报错的时候终止js的生成，可以在tsconfig.json中配置onEmiOnError即可 ts只会在编译时对类型进行检查，如果发现错误，编译时就会报错；（静态检查） 而js是再运行时，发现错误，会报错；（动态检查） 3. 数据类型 1. 原
Typescript笔记
m0_62475892的博客
06-03 982
typescript typescript的一个特征就是静态类型检测。在JavaScript中，需要将代码运行到浏览器中才可以查看报错结果。 在typescript提供的编译环境中发现，在编写代码的阶段，就直接给出下划线错误提示信息。 typescript会对错误的拼写,函数未调用，逻辑错误等进行检测。 typescript基本认识 安装typescript:npm i typescript -g 创建一个1.ts的文件并添加代码。发现如果在编写代码环节就出现了某些错误，那么会直接给出错误的提示信息。
React路由表中TypeScript类型注解
bl_ack233的博客
09-22 794
解决 "xxx指的是一个值，但在此处用作类型" 问题，改变后缀为tsx
es6学习笔记三
opo77_的博客
05-18 285
es6 es6阮一峰 学习笔记（以下）： 字符串的新增方法 String.fromCodePoint() String.raw() 实例方法：codePointAt() 实例方法：normalize() 实例方法：includes(), startsWith(), endsWith() 实例方法：repeat() 实例方法：padStart()，padEnd() 实例方法：trimStart()，trimEnd() 实例方法：matchAll() 1. String.fromCodePoint() E
nodejs学习-day02
qq_40357974的博客
03-10 208
day02 代码风格： 当第一行代码是以下面三种开头的时候，需要在前面补上一个分号： ( [ ’ == 需要在前面补上一个分号，避免出现语法解析错误==
TypeScript提示 “Symbol“ 仅指类型，但在此处用作值。
优快云 for recording problems
01-04 7689
Symbol类型作为ES6的新增类型，.如果您的目标是ES5或更低,则会出现此错误。 可以通过在tsconfig.json中将目标升级到es6来解决此问题： 或者,如果您不想更改目标,但希望编译代码,请将es6添加到lib选项中： ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值