react router6（6V 版本的 react-router-dom 编程式跳转）
本文目录
6V 版本的 react-router-dom 编程式跳转
因为之前搭建的 react 版本比较新 其中
"react-router":"^6.2.2",
"react-router-dom":"^6.2.2",
"webpack":"^5.70.0",
"webpack-cli":"^4.9.2",
"webpack-dev-server":"^4.7.4"
react-router 都是6+版本的 。
在项目过程中免不了 路由跳转，各种百度后发现 6+版本的 react 做了比较大的改动（以前的 什么 hisyory 方式 似乎已经被替代）。
***隐藏网址***
注意：
如果想要使用useNavigate() 进行路由跳转页面
import { useNavigate }from "react-router-dom"; 在 export default function Login() { } 内部使用（hook写法只能在函数里）。
如图
这里 我干脆就将 登录的页面 作为一个组件 引入 了其他页面 如图
这样的话如果 如果有其他需求 需要传参什么的 就 相对比较容易了（如果想练习一下组件传参 就可以将 login 页面拆分一下 ，即可 ）。
reactrouter6.push不刷新页面
reactrouter6.push不刷新页面的原因和解决方法如下：
当使用push的时候,会向 history 栈添加一个新的记录,这个时候,再次添加一个完全相同的路由的时候,就不会再次刷新了. 没有耐心的可以直接看第九种方式,绝绝子,适用所有场景. 解决办法有这么几种: 1. 添加activated函数。 activated(){ 在这里插入代码片 }
React-Router 介绍及使用
React-Router 4.0 版本之前安装
React-Router 4.0 版本之后安装
在React-Router 4.0 开始，官方提供一个基础的路由 react-router 。
目前使用的版本
获取path的参数
Route里面 component 和 render 这两个属性的使用：
《Link /》 里面的 to 属性是一个对象， 比如：传递一个基本的 location 对象也可以在后面加上传递其他的对象, 这些对象值都可以通过 props 获取这里面的参数
《NavLink》 是 《Link》 的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有：
Switch 意义：
这个 to 属性也可以是一个对象
《Redirect /》 里面的 from 属性：
例如：
***隐藏网址***
***隐藏网址***
更多文章：
react router6（6V 版本的 react-router-dom 编程式跳转）
2026年10月3日 20:11
2026年10月3日 15:40
2026年10月3日 12:00
2026年10月3日 11:00
2026年10月3日 10:30
在线shell脚本（写个LINUX的SHELL 脚本，要求：PING 一个网站地址，把结果写到另一个文本文件中，怎么写，请教，在线等）
2026年10月3日 09:40
2026年10月3日 09:30
pipeline flex（pipeline flex（Ev3）走社保可以报销吗）
2026年10月3日 07:30
2026年10月3日 06:20
ignorecase false（iis php伪静态怎么设置）
2026年10月3日 05:50
