TS与React中的路由表

最新推荐文章于 2024-07-28 22:28:43 发布
原创 最新推荐文章于 2024-07-28 22:28:43 发布 · 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使用表格加确认弹框
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
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)
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)}
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选项中： ...
BrowserRouter与HashRouter的区别 --- react
weixin_60847252的博客
11-17 530
1.底层原理不一样: BrowserRouter使用的是H5的history API,不兼容IE9及以 下版本。 HashRouter使用的是URL的哈希值。 2. path表现形式不一样 BrowserRouter的路径中没有#，例如: localhost :3000/ demo/test HashRouter的路径包含#，例如: localhost :3000/#/demo/test 3.刷新后对路由state参数的影响 (1) . BrowserRouter没有任何影响，因为state保
custom tabbar
千里之行，始于足下
12-21 1732
<br /><br />                                       (图1)<br />效果图如上.tabbar上显示图片颜色总是与tabbar背景相关.如何制作上面效果的tabbar呢??<br /> <br />1.首先制作一个mainwindow.xib中创建下面的view,在这个view中添加四个custom button,添加图片.<br /><br />                                      (图2)<br /> <br />
react路由篇
最新发布
m0_54864716的博客
07-28 4034
嵌套路由是指将一个路由配置嵌套在另一个路由配置中的情况。通过嵌套，我们可以在应用中创建更复杂的页面结构，使得页面的层次关系更加清晰。首先抽象路由表，之后通过递归进行求解子路由，这里只显示两层路由，实际上可以使用 一个递归函数递归出路由来，如下所示path: "/",},path: "/",},}]},},return (return (return (}):null}})
关于vue-router中动态路由与路由守卫详情
weixin_51029697的博客
04-27 1703
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' /* 关于vue-router知识点： createRouter： 创建一个可以被 Vue 应用程序使用的路由实例。 查看 RouterOptions 中的所有可以传递的属性列表。 createWebHashHistory： 创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)， 或当配置服务器不能处理任意 U.
react-router-dom的基本使用
坚持原创
07-06 217
one和two是子路由 import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom"; <Router> <ul> <li> <Link to="/">Home</Link> </li> <li> .
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值