TS与React中的路由表

于 2023-10-29 15:37:48 发布
阅读量123 收藏
点赞数
文章标签： react.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hello_helloworld/article/details/134103654
版权

TS与React中的路由表

错误记录

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

错误分析

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

Taoika
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
一、ts语法基础 数据类型
m0_45382009的博客
02-14 2358
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. 原
React6---配置路由表
weixin_44085020的博客
03-28 2513
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 or vue + ts 通用axios封装的方法。
07-21
react + ts or vue + ts 通用axios封装的方法。 封装通用ts类型，封装通用requestMode.ts，统一存放api请求路径
react知识点汇总四--react router 和 redux
BradenHan的专栏
07-10 693
React-Router 是一个用于在 React 应用中实现页面导航和路由管理的库。它提供了一种方式来创建单页应用（Single-Page Application，SPA），其中页面的切换是在客户端进行的，而不需要每次跳转都向服务器请求新的页面。使用 React-Router，你可以定义应用的路由规则，并且根据这些规则渲染不同的组件。你可以将路由映射到特定的URL，当用户在浏览器中访问这些 URL 时，React-Router 将会根据配置的规则找到对应的组件并将其渲染到页面上。
React Router最新指南与异步加载实践
weixin_34258782的博客
07-25 183
本文从属于笔者的React入门与最佳实践系列 Introduction React Router是基于React的同时支持服务端路由与客户端路由的强大易用的路由框架，可以允许开发者方便地添加新页面到应用中，保证页面内容与页面路由的一致性以及在页面之间进行方便地参数传递。之前React Router作者没有积极地开发与审核Pull Requ...
关于react、vue的一些问题
weixin_45750771的博客
08-15 741
DVA整合reducer，initialState、action、saga app.model({ namespace: 'products', state: { list: [], loading: false, }, 在dom ready之后运行 subscriptions: [ function(dispatch) { dispatch({type: 'products/query'}); }, ], effects: {
TypeScript学习笔记之数据类型
长歌的博客
12-18 2716
布尔值： 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 2456
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
Typescript笔记
m0_62475892的博客
06-03 336
typescript typescript的一个特征就是静态类型检测。在JavaScript中，需要将代码运行到浏览器中才可以查看报错结果。 在typescript提供的编译环境中发现，在编写代码的阶段，就直接给出下划线错误提示信息。 typescript会对错误的拼写,函数未调用，逻辑错误等进行检测。 typescript基本认识 安装typescript:npm i typescript -g 创建一个1.ts的文件并添加代码。发现如果在编写代码环节就出现了某些错误，那么会直接给出错误的提示信息。
React路由表中TypeScript类型注解
bl_ack233的博客
09-22 530
解决 "xxx指的是一个值，但在此处用作类型" 问题，改变后缀为tsx
umi基础框架（React+umi+Ts）
08-05
umi、dva、React
React18结合TS视频教程下载2022
09-01
React18结合TS视频教程下载2022
React-ts:React-ts项目
03-31
ReactReact-ts项目
TS-React
02-13
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。npm run eject 注意：这是单向操作。 eject ，您将无法...
【前端学习】React学习笔记-ReactRouter6
SDUzzy的博客
03-30 1522
跟着尚硅谷的天禹老师学习React 看视频可以直接点击 b站视频地址 概述 在2021年11月，React官方将ReactRouter6调整为ReactRouter的默认版本 1.React Router以3个不同的包发布到npm上，它们分别为： react-router：路由的核心库，提供了很多的组件和钩子。 react-router-dom：包含了react-router所有内容，并添加了一些专门用于DOM的组件，例如<BrowserRoute/r> react-router-native
【React系列教程八】React路由react-router的配置、路由传值、js跳转路由、路由模块化
qing_小诺的博客
04-18 785
一、react路由的配置： 1、找到官方文档 https://reacttraining.com/react-router/web/example/basic 2、安装 【cnpm install react-router-dom --save】 3、找到项目的根组件引入react-router-dom import { BrowserRouter as Router, Ro...
# react 中使用路由 router 详解
大家好，我是 ed.
10-26 2254
路由就是一个映射关系（ key: value）。key 为路径， value 可能是 function 或者是 component。我们学习路由的时候会遇到两个经常用的单词router和route。区别是什么呢？router 是全局的路由器对象。route 是当前激活的路由对象。打个比方哈，我们自己家里上网需要路由器吧，router 就相当于家里的 路由器。route 就相当于路由器上面的网线插口或者是那个天线，不能没有 router 就是用 route。明确好界面中的导航部分、展示部分都是哪里。
es6学习笔记三
opo77_的博客
05-18 188
es6 es6阮一峰 学习笔记（以下）： 字符串的新增方法 String.fromCodePoint() String.raw() 实例方法：codePointAt() 实例方法：normalize() 实例方法：includes(), startsWith(), endsWith() 实例方法：repeat() 实例方法：padStart()，padEnd() 实例方法：trimStart()，trimEnd() 实例方法：matchAll() 1. String.fromCodePoint() E
“...”是字段，但此处被当作类型来使用
热门推荐
至浊至愚
10-23 1万+
“...”是字段，但此处当作类型来引用
react 获取路由表
最新发布
11-16
要获取React路由表，可以使用react-router-dom提供的useRoutes钩子。useRoutes钩子接受一个路由配置对象，并返回一个路由匹配对象。以下是一个例子： ```javascript import { useRoutes } from 'react-router-dom';...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值