react-router-dom v6版本跳转路径的方法

最新推荐文章于 2024-03-26 16:38:39 发布
最新推荐文章于 2024-03-26 16:38:39 发布
阅读量6.2k 收藏
点赞数 2
分类专栏： react学习中遇到的小问题 文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42724424/article/details/123109410
版权

说明：
在V5中，可以通过withRouter包裹当前组件使得当前组件可以拥有其根组件的props属性，也即可以拿到history对象等，但在V6版本中，使用了useNavigate代替withRouter，当需要路由跳转时，可以更快捷的使用

使用示例：
1.引入useNavigate并且定义一个navigate
在这里插入图片描述
2.在需要点击跳转路由的地方，直接在点击事件中使用navigate(),括号内加入需要跳转的路由path即可正常跳转

前端学习冲冲冲
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
react_antd:react，react-router-dom @ 4.0，react-redux，antd
05-06
新手一看代码就秒懂的react企业后台管理模板，老手请借鉴。 react@16.11.0、[email protected]、react-router-dom@5.1.2, 这是一个react + antd的后台管理系统模版框架,具有响应式动态路由（可根据后台服务器提供列表或者登录验证身份进行修改Menu菜单）。 具备列表表单的增删改查、功能齐全的[email protected]富文本、响应式表单验证登录状态和修改密码状态、echarts的图表管理。 运行和打包说明 安装包依赖（需要[email protected]） 第一、npm install 第二、yarn start（具备yarn的npm包） 打包生产环境,目标目录build yarn build 技术栈 react（v16.11版本）+ redux(v4.04版本) 功能模块 首页、商品管理、图表管理、富文本、设置修改密码、登录。 使用说明 1.菜单栏目可
SimpleRouteWithReact:这是一个简单的网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据
05-20
这是一个简单的React网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据。 入门 使用此应用之前，请检查您的PC是否具有reactJs工作环境。 打开Git Bash。 将当前工作目录更改为要克隆目录的位置。 使用以下命令进行克隆：git clone 在运行应用程序之前，请安装react-router-dom和axios npm install react-router-dom npm安装axios 可用脚本 在项目目录中，可以运行： yarn start或npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
React常见跳转方式汇总
最新发布
大道至简
03-26 682
Link><NavLink>在React中，路由跳转通常是通过使用库实现的，它是React的一个第三方库，专门用于处理在React应用程序中的路由。以下是如何在不同的情况下使用。
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文| 使用缓存为Vue中的keep-alive类的react-router 。 如果只想要<KeepAlive> ，请尝试 React v15 + React-Router v4 + 问题 使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互 原因与解决方案 Route不匹配时，组件将被卸载 阅读源代码之后Route ，我们发现使用children撑起一个功能，可以帮助控制呈现行为。 隐藏而不是删除将解决此问题。 安装 npm install react-router-cache-route --save # or yarn add react-router-cache-route 用法 用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由） impor
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React服务器端渲染和使用。 寻找对React Router 3的支持，请参阅文档。 尝试React Router 5，尽管它很棒！ 用法 要安装koa-react-router ： npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所示： // index.js import Koa from 'koa' ; 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 Declarative routing for 文档 Packages 这个存储库是我们使用管理的monorepo。 这意味着我们实际上从相同的代码库发布了几个包到npm，包括: Package Version Docs Description React Router的核心 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--router的开发由React Training和许多的贡献者完成。 如果您有兴趣了解更多关于React能为您的公司做什么的事情，请联
react-router-dom v6 版本使用内容详解
刻痕
02-16 9786
react-router-dom v6 版本使用内容详解 1.路由组件 (1-1) v6 方式一 react-router-dom 常规 (1-2) v6 方式二 react-router-dom 使用 useRoutes 2.页面跳转 (2-1) Link 组件跳转 (2-2) useNavigate hooks跳转，代替useHistory 3.获取路由的参数 (3-1) useParams 获取动态路由的值 (3-2) useSearchParams 获取查询字符串的值
React-Router-domV6 + AntdV5 导航菜单实现路由跳转
Ccc67ol的博客
12-13 3350
因为是主学后端，为了做项目学点前端。下面的代码都是，主要是，分享一下学习收获和。不足之处还请大佬多指点。附注：本文章多是参考其他文章的代码案例进行实现，主要自己的东西还是解决bug的心得。
react-router-dom V6
weixin_41229365的博客
07-26 245
React路由
Reactv6.0 路由跳转（一）
m0_59982373的博客
09-20 1567
Reactv6.0 路由跳转（一）
react-router-domV6版本在js文件使用history跳转
qq_23207707的博客
07-11 2831
非React的上下文环境或全局变量中使用Router
react-router-dom6 实现编程式跳转路由
Jack, what else can you do besides holding your little darling?
12-16 4377
react-router-dom6 实现编程式跳转路由
react-router-dom 6 js逻辑业务层跳转形式
weixin_45966674的博客
11-20 222
目前的话 是要通过 react-router-dom 中的useNavigate函数来实现。react-router-dom 6 对props的使用也做了比较大的改动。
react路由配置,路由跳转与传值,路由监听
wlt_5079的博客
06-21 5055
1.react路由配置 2.react路由跳转和传值 3.react路由监听
react-router-dom v6的基本使用
qq_45750263的博客
12-12 3555
在react中使用react-router
react-router-dom使用指南（最新V6）
江咏之
08-17 2390
通过嵌套的书写Route组件实现对嵌套路由的定义。path开头为/的为绝对路径，反之为相对路径。可以在任何组件中使用Routes组件，且组件内的Routes中，路径默认带上当前组件的路径作为前缀。注意：此时定义父组件的路由时，要在后面加上/，否则父组件将无法渲染。}使用useRouteshook，可以使用一个JS对象而不是Routes组件与Route组件来定义路由。其功能类似于useRoutes的返回是 React Element，或是 null。children?element?index?...
react-router-dom v6如何使用link进行页面跳转
waoecher的博客
07-18 1149
v6中不再像v5中使用等，而是使用
react-route-dom v6 页面之间跳转传参
waoecher的博客
07-18 969
页面之间跳转传参
react-router-dom6总结（非常全！）
qq_43511573的博客
10-25 3906
react详解
react-router-dom v6跳转
01-12
在React中使用react-router-dom v6进行跳转的方法如下： 1. 首先，确保你已经安装了react-router-dom v6。你可以使用以下命令进行安装： ```shell npm install react-router-dom@next ``` 2. 在你的组件中引入所需的API： ```javascript import { BrowserRouter as Router, Routes, Route, Link, Navigate } from 'react-router-dom'; ``` 3. 在你的组件中使用`Router`组件包裹你的路由： ```javascript export default function App() { return ( <div className="app"> <Router> {/* 在这里定义你的路由 */} </Router> </div> ); } ``` 4. 使用`Routes`组件定义你的路由规则，并使用`Route`组件定义每个具体的路由： ```javascript export default function App() { return ( <div className="app"> <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> {/* 其他路由规则 */} </Routes> </Router> </div> ); } ``` 5. 在需要进行跳转的地方，使用`Link`组件或`Navigate`组件进行跳转： - 使用`Link`组件： ```javascript import { Link } from 'react-router-dom'; function Home() { return ( <div> <h1>Home</h1> <Link to="/about">Go to About</Link> </div> ); } ``` - 使用`Navigate`组件： ```javascript import { Navigate } from 'react-router-dom'; function Home() { return ( <div> <h1>Home</h1> <button onClick={() => <Navigate to="/about" />}>Go to About</button> </div> ); } ``` 请注意，以上是react-router-dom v6的用法，与v5有一些不同。在v6中，`<Switch>`组件被替换为`<Routes>`组件，`<Redirect>`组件被替换为`<Navigate>`组件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值