TS与React中的路由表

最新推荐文章于 2024-08-13 08:00:00 发布
最新推荐文章于 2024-08-13 08:00:00 发布
阅读量436 收藏
点赞数 2
文章标签： react.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hello_helloworld/article/details/134103654
版权
博客围绕TS与React中的路由表展开，记录了‘Search’表示值却用作类型的报错。参考js+react项目创建路由表却报错，经查看其他ts+react项目发现，routes下应为index.tsx而非index.ts，原因可能是js可随意用组件，而ts只能用tsx。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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 1175
请注意，上述示例中的权限检查逻辑是非常基本的，并且假设权限状态存储在localStorage中。在实际应用中，你可能需要从服务器获取权限信息，并使用更复杂的逻辑来验证用户权限。组件外，你还可以使用高阶组件（HOC）或渲染道具（Render Props）模式来实现路由权限控制。接下来，你需要创建一个受保护的路由组件，该组件会包裹你的路由，并根据权限检查的结果来决定是否渲染该路由的组件。），它封装了权限检查的逻辑，并返回一个布尔值或用户角色/权限列表。组件，以便对需要权限的路由进行保护。
React系列：嵌套路由的使用
乐于分享，共同成长
12-17 375
React系列：嵌套路由的使用
React6---配置路由表
weixin_44085020的博客
03-28 2672
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 3248
return (发现音乐我是downLoad的插槽{useRoutes(routes)}
react+ts+vite项目 路由的搭建 （route v6）
qq_44754016的博客
04-20 4297
用来操作浏览器历史栈， 主要是可以用来封装路由前置守卫和后置守卫， vue有自己的路由守卫钩子， react是需要依赖history自己封装的， 关于路由守卫的封装另开一篇讲解。2、 在app.tsx 文件中改造一下html结构， 本质上就是利用数组循环出Route，简化书写嵌套Route， 增减路由只需维护RouteConfig文件里的配置内容即可。需要注意， 路由最好使用懒加载，节省效率， 所以对以上代码改造一下，最终呈现如下。悄咪咪放个链接，讲history的，不了解的可以看看~
react学习笔记-5：react路由
snipercai的博客
03-07 730
react学习，路由
React复习（11）：React-Router
愤怒的小火柴人
03-07 638
随着react的版本逐步更新，逐渐衍生出一个新的路由库React Router，直至现在，该路由库已经成为官方认证的路由库了。
如何搭建TS的React项目router6
weixin_43867229的博客
04-19 345
router6的时候反而不适用了于是用下文。
使用 TypeScript 在 React JS 中进行路由
技术探索驿站
08-13 1024
单页应用程序 (SPA) 中的路由支持在视图之间导航，而无需重新加载应用程序。React Router 是 React 应用程序中路由的标准库。本文简要概述了使用 TypeScript 设置路由的方法。
react-typescript中配置路由
m0_59324574的博客
12-06 1113
第一步：先创建一个react-typescript的项目 create-react-app ts3 --template typescript 第二步：然后安装相关依赖 cnpm install react-router-dom react-router-config -S 第三步：在src的index.js中引入下面的 import {HashRouter as Router} from 'react-router-dom' 第四步：把React.StrictMode替换为Rou.
TypeScript学习笔记之数据类型
长歌的博客
12-18 2925
布尔值： 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 3028
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
一、ts语法基础 数据类型
m0_45382009的博客
02-14 2546
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 818
typescript typescript的一个特征就是静态类型检测。在JavaScript中，需要将代码运行到浏览器中才可以查看报错结果。 在typescript提供的编译环境中发现，在编写代码的阶段，就直接给出下划线错误提示信息。 typescript会对错误的拼写,函数未调用，逻辑错误等进行检测。 typescript基本认识 安装typescript:npm i typescript -g 创建一个1.ts的文件并添加代码。发现如果在编写代码环节就出现了某些错误，那么会直接给出错误的提示信息。
nodejs学习-day02
qq_40357974的博客
03-10 188
day02 代码风格： 当第一行代码是以下面三种开头的时候，需要在前面补上一个分号： ( [ ’ == 需要在前面补上一个分号，避免出现语法解析错误==
ts 报 “number”仅表示类型,但在此处却作为值使用的问题
News777的博客
10-18 3313
ts 报 “number”仅表示类型,但在此处却作为值使用的问题
React 学习笔记总结(八)
探索技术与实践的旅程，分享编程经验与工具使用心得，助力开发者提升技能。
01-13 793
一、React Router 6 二、router6版本的 安装 和 一级路由 1. 安装router6版本 2. Routes组件 和 Route的 element属性 三、router6 之 重定向 四、router6的 NavLink高亮 五、router6 的 useRoutes路由表(重要) 六、router6 的 嵌套路由 七、router6 的 params参数 八、router6 的 search参数 九、router6 的 state参数 十、router6 编程式路由导航 十一、rout
react-router-dom的基本使用
坚持原创
07-06 197
one和two是子路由 import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom"; <Router> <ul> <li> <Link to="/">Home</Link> </li> <li> .
写一个最简单的React可配置路由（react-router
weixin_43375908的博客
11-21 1459
弗曼学习大法好 记录一下之前写的React可配置路由 主要实现的是通过config文件生成路由， 功能应该和react-router-config差不多（还没看， 不过自己写下踩踩坑也许会有收获 CRA创建app （秉持着学习的心态我装了ts，react-router-dom@6.0 从0开始看看会遇到什么坑 npm install -D react-router-dom npm install -D -S @types/react-router-dom 新建 src/router/routerConfi
vite 创建react项目react router v7
最新发布
01-12
npm create vite@latest my-react-app --template react-ts cd my-react-app npm install react-router-dom@next ``` 这段代码片段展示了如何利用 `create-vite` 命令快速建立一个新的 Vite 项目，并指定模板为带有...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值