react-router与react-router-dom配合ts的小问题

最新推荐文章于 2024-04-08 17:59:53 发布
最新推荐文章于 2024-04-08 17:59:53 发布
阅读量1.2k 收藏
点赞数
分类专栏： typescript react 文章标签： typescript react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42971933/article/details/118931767
版权

想用react-router配合ts学习react，刚拉好项目，第一步做路由就出问题了：

我在安装了react-router/react-router-dom的情况下，在ts文件里面引用，但是编辑器都老是给我报红线，提示我找不到模块，百思不得其解，node_modules里面也是有这个的。强行启动项目照样报错。
最后找了一圈网上的问题，最后知道是因为ts的问题，我得再下载依赖@types/react-router/@types/react-router-dom,才可以使用。尝试下载之后竟然没问题了，真是感慨，不懂typescript确实，连自己错在哪里都不知道！

附上看到的那片文章，以后供参考：
https://blog.csdn.net/s2096828/article/details/83744677

吕小胖纸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React：react-router-dom 使用
林夏天的博客
08-19 755
1. react-router 与 react-router-dom区别 react-router与react-router-dom使用时的区别 2. 示例 安装： 首先进入项目目录，使用npm安装react-router-dom： npm install react-router-dom --save-dev 基础使用： Class1.js： import React, { Component } from 'react'; class Class1 extends Component {
ts+react路由react-router-dom
weixin_42429288的1博客
07-01 5050
记录自己项目中写的内容 路由入口是一个组件， 路由出口用Switch包着，大概如下 <TopNavigationBarWithRoute routePath={this.state.routePath} /> <Switch>{this.renderAllRoutes()}</Switch> //我们看一下 this.state.routePath const routePath: IR
在React中使用react-router-dom路由
beichen3997的博客
01-17 571
在React中使用react-router-dom路由 使用React构建的单页面应用，要想实现页面间的跳转，首先想到的就是使用路由。在React中，常用的有两个包可以实现这个需求，那就是react-router和react-router-dom。本文主要针对react-router-dom进行说明。 安装 首先进入项目目录，使用npm安装react-router-dom： npm in...
react+TS react-router-dom动态路由配置
最新发布
m0_73863692的博客
04-08 650
第一次写博客，小白一枚，欢迎指点~~
react + ts,路由组件 react-router-dom V6.2.1
菜鸟先飞
03-23 668
<Route> 必须用<routes>包裹一下，否则会报错，且<Link> 不可放在<Routes>标签以内。element={<Home />} 必须作为一个组件形式引入进来
【react17+ts】react使用react-router-dom动态生成路由-03
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-09 1646
1.index.tsx存放项目路由 import React,{lazy} from "react"; import RouterInterface from "@/router/routerInterface"; //lazy懒加载路由，按需加载视图 const Login = lazy(() => import("@/views/v1/login/Login")); //普通用户 const UserOperation = lazy(()=>import('@/views/v1/userO.
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React... import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
react-router:react-router 中文文档
04-29
react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react-...
react-router-CN：React Router V4中文文档
02-19
用于DOM绑定的React Router 用于的React路由器 React Router和Redux的集成 静态路由配置帮助助手 加群交流 React技术交流1群（已满）： React技术交流2群： 鸣谢 感谢支持React Router的开发。 另外，感谢提供...
react-router-dom-demo
07-21
在React开发中，路由管理是不可或缺的一部分，而`react-router-dom`是React社区广泛使用的路由库，它使得在单页应用（SPA）中实现页面间的导航变得简单易行。本项目"react-router-dom-demo"专注于演示如何在React...
React + ts + react-router-dom + andt + hooks（没写完）
Lycoris_Red的博客
02-15 280
1.创建react + ts 项目 create-react-app react-demo --template typescript 2.安装路由 npm install -save react-router-dom
python | 三种可变参数简述
以秘
08-27 823
*，传递参数是关键字。在*后的参数通过关键字传递参数，一般作为形式参数时，赋予初始值，表示位置参数结束 def safe_division_c(number, divisor, *, numberzero=False, divisorzero=False): print("===================") print(numberzero) print(divisorzero) if numberzero & divisorzero: pr
react路由及redux中使用TS
你华还是你华
05-01 2396
本文目录一、react路由中使用ts二、redux中使用ts 一、react路由中使用ts 输入命令npm i react-router-dom@5安装路由： 再输入命令：npm i --save-dev @types/react-router-dom安装路由类型推断。 新建如下文件： Film.tsx写入如下代码： import axios from 'axios' import { Component } from 'react' import { RouteComponentProps } fro
react+ts之router管理
热门推荐
欢迎来到☆槿畔☆的博客
07-04 2万+
react-router@6.x与vue-router越来越像...不信自己看，结合react进行实战吧
React-路由 react-router-dom
廖若星辰-LTY
08-25 6475
React 路由 react-router-dom BrowserRouter Routes Route Link useNavigate useSearchParams useParams useRoutes 声明式导航 编程式导航 路由传参 默认路由 路由嵌套
Vite+react+ts项目-react-router-dom6的分离式路由表
YYTX_YS的博客
05-26 962
出现路由超出边界的报错，需要使用react-router-dom提供的HashRouter或者BrowserRouter包裹（推荐使用BrowserRouter）解决办法，使用react提供的Suspense包裹懒加载的组件，通过懒加载加载进来的页面渲染的时候可能会有延迟，但使用了Suspense之后，可优化交互。第一次进行路由跳转，出现报错，刷新后，再次跳转就不会报错（懒加载的问题）引入组件（多个组件可以使用懒加载）直接在main.tsx中引入。在App.tsx引入依赖。
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理
qq_50785995的博客
03-17 790
一、通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目，可以看到顺利生成了react项目且组件的后缀为tsx,此时说明成功创建了react+typescript项目的雏形 在项目根目录下，运行npm run start，成功启动项目 npm run start 二、配置路由 npm i react-router-do...
react-router-dom 简单使用
AS_TS的博客
09-04 668
项目创建完成后，需要使用 router 时，react-router-dom 提供了 router 服务 1. 下载安装 react-router-dom npm install --save react-router-dom 或 yarn add react-router-dom 如果使用 Typescript ，需要安装一个 react-router-dom 的声明文件，vscode 会有提示 yarn add @type/react-router-dom 2. 组件引用 react-router-do
react-router-dom react-router-config 安装失败
01-13
您可以尝试以下步骤来解决react-router-dom和react-router-config安装失败的问题： 1. 确保您已经正确安装了Node.js和npm。您可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 确保您的项目目录下有一个正确的package.json文件。如果没有，请在终端中导航到项目目录并运行以下命令来创建一个新的package.json文件： ```shell npm init -y ``` 3. 确保您的项目目录下没有其他正在运行的npm进程。您可以尝试关闭终端并重新打开一个新的终端窗口，然后再次尝试安装。 4. 确保您的网络连接正常。有时候安装过程中会因为网络问题而失败。您可以尝试使用其他网络连接或者使用VPN来解决这个问题。 5. 尝试使用npm的镜像源来安装。您可以在终端中运行以下命令来切换到淘宝的镜像源： ```shell npm config set registry https://registry.npm.taobao.org/ ``` 然后再次尝试安装react-router-dom和react-router-config。 如果您仍然遇到问题，请提供更多的错误信息或者详细描述您遇到的具体问题，以便我能够更好地帮助您解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值