在React中使用 react-router-dom 编程式路由导航的正确姿势【含V5.x、V6.x】

最新推荐文章于 2024-07-08 17:06:23 发布
最新推荐文章于 2024-07-08 17:06:23 发布
阅读量495 收藏 1
点赞数 2
分类专栏： 前端 html 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61083409/article/details/123220651
版权
本文详细介绍了在React中使用`react-router-dom`进行编程式路由导航的方法，包括V5和V6两个版本的push、replace跳转，以及携带params、search和state参数的操作，同时也涵盖了前进、回退和go操作。同时，文章提供了相关React Hooks和路由传参的深度解析链接。
摘要由CSDN通过智能技术生成

react-router-dom 编程式路由导航 (v5)

1.push跳转+携带params参数
 props.history.push(`/b/child1/${id}/${title}`);
2.push跳转+携带search参数
props.history.push(`/b/child1?id=${id}&title=${title}`);
3.push跳转+携带state参数
props.history.push(`/b/child1`, { id, title });
4.replace跳转+携带params参数
this.props.history.replace(`/home/message/detail/${id}/${title}`)
5.replace跳转+携带search参数
this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
6.replace跳转+携带state参数
this.props.history.replace(`/home/message/de
最低0.47元/天 解锁文章
m0_61083409
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React路由使用步骤(含三种传参方式+编程式导航)
weixin_68658847的博客
04-21 4323
React路由使用步骤(含三种传参方式+编程式导航)
React Route: 使用 useHistory 实现编程式导航
学习笔记
02-03 2734
const history = useHistory(); useHistory() 返回一个对象，可以使用两种方法：push 和 replace 实现编程式导航，push 增加新页，可以使用后退按钮返回到旧的页面，使用 replace 则不能返回。 sample code： import { useHistory } from "react-router-dom"; import QuoteForm from "./../components/quotes/QuoteForm"; const NewQ
快速上手使用react-router-dom 6
weixin_43689603的博客
05-20 764
快速上手使用react-router-dom 6 官方文档地址：https://reactrouter.com/docs/en/v6/getting-started/overview 1. 与旧版本的主要变化 变化1：Switch标签替换成Routes 变化2：原本渲染组件的方式由 <Route path="/" component={Home}> 变为 <Route path="/" element={<Home/>} （其中Home是
2024年前端最新react-router-dom V6 中文文档教程总结_reactrouter6中文文档(2)，2024前端大厂高频面试题
2401_84616922的博客
05-13 1189
获取路由参数 ，在以往的react-router-dom版本中，路由的三个参数location、history、match都是直接挂载到组件的props身上，即使组件不是路由组件，也可以使用withRouter高阶组件对普通组件进行增强，也可以将这三个参数带到props身上。编程式路由导航，在非受控组件中可以使用useNavigate这个钩子进行导航，而在类组件中无能为力，只能想办法使用这个标签，非常的麻烦，可以看看这篇文章：https://www.jianshu.com/p/5bdfd2fac2cd。
react-router-domV6版本在js文件使用history跳转
qq_23207707的博客
07-11 2876
非React的上下文环境或全局变量中使用Router
react中react-router-dom中的编程式导航
mmmawo的博客
11-17 565
场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？ 页面跳转有两类方式： 用户点击链接跳转 写代码跳转-编程式导航 编程式导航的格式 import {useHistory} from 'react-router' export default function App() { const history = useHistory() history.push('/find') // 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-
【React 框架】路由 / react-router-dom 相关 API / 嵌套路由 / 路由组件传递参数 / 编程式路由导航
qq_30148319的博客
07-07 494
（1）单页 Web 应用（single page web application，SPA）。 （2）整个应用只有一个完整的页面。 （3）点击页面中的链接不会刷新页面，只会做页面的局部更新。 （4）数据都需要通过 ajax 请求获取，并在前端异步展现。 （1）一个路由就是一个映射关系 ( key：value )。 （2）key 为路径，value可能是 function 或 component。2.2.1 后端路由 （1）理解
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文|使用缓存为Vue中的keep-alive类的react-router 。如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案...
SimpleRouteWithReact:这是一个简单的网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据
05-20
这是一个简单的React网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据。入门使用此应用之前，请检查您的PC是否具有reactJs工作环境。 打开Git Bash。 将当前工作目录更改为要克隆...
react-router-dom 嵌套路由的实现
11-20
import ReactDOM from "react-dom" import App from "./App.jsx" import "babel-polyfill" const root = document.getElementById("app") if (root !== null) { ReactDOM.render(, document.getElementById("app"))...
react-router V6路由配置等例子 1. 路由传参几种方式等例子 2. 路由表配置
09-17
react-router V6路由配置等例子 1. 路由传参几种方式等例子 2. 路由表配置 3. useRoutes钩子的使用 4. 数据路由 createBrowserRouter API + RouterProvider 组件 的使用
react-router-v6:在此仓库中，我了解了React Router v6的一些基础知识
04-17
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。yarn eject 注意：这是单向操作。 eject ，您...
React-路由 react-router-dom
廖若星辰-LTY
08-25 6475
React 路由 react-router-dom BrowserRouter Routes Route Link useNavigate useSearchParams useParams useRoutes 声明式导航 编程式导航 路由传参 默认路由 路由嵌套
react路由学习 react-router-dom初始化
最新发布
qq_54559394的博客
07-08 273
比如父级goods路由下面新增一个child 你可以写 child 或者是/goods/child 不能写/child。和navlink一样 两者之间的区别是 navlink可以判断激活状态可以设置样式 link就是普通的a标签。这个东西有点类似于vue-router中的路由独享守卫 在路由中配置loader函数 路由加载之前调用。在vue中我们可以使用独享守卫来进行接口的请求 拿到对应页面的数据 loader也可以发送异步请求。当我们在做权限拦截的时候可以通过loader来进行判断。
react18+router6+Antd 项目搭建1
舒婷的博客
08-19 1276
react18+router6+antd 项目搭建
react-router v6
Sapling
11-05 432
React Router 6x比5x有哪些改动？内置组件将改为等语法变化改为等。
React----函数组件路由React-Router（V6）
王延朕的博客
04-07 2035
安装react-router yarn install --save react-router index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import {BrowserRouter} from "react-router-dom"; ReactDOM.render( <React.StrictMode
使用 React 路由器以编程方式导航
kalman2019的博客
01-14 1262
使用 react-router，我可以使用 Link 元素创建由 react 路由器本地处理的链接。我在内部看到它调用 this.context.transitionTo(...)。我想做一个导航。不是来自链接，而是来自下拉选择（例如）。我怎样才能在代码中做到这一点？ this.context 是什么？我看到了 Navigation mixin，但是没有 mixins 我可以这样做吗？
知乎日报项目前端+后端-React18 + React-Router6 + React-redux + redux/toolkit
动感超人的博客
04-03 466
技术栈使用React18 + React-Router6 + React-redux + redux/toolkit + craco(重写配置) + ( amfe-flexible + postcss-pxtorem 达到适配 ) + lesskeep-alive效果没实现,找了几个库效果都不理想,就没去弄了。
react-router-dom v6 配置试路由使用
05-16
React Router v6 与 v5 的用法略有不同。下面是一个基本的路由配置示例： ```jsx import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Home from './Home'; import About from './About'; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值