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 属性：
例如：
***隐藏网址***
***隐藏网址***
更多文章：
idea控制台乱码（idea 输出 System.out.println（） 控制台乱码）
2026年10月14日 07:30
2026年10月14日 06:20
spring事务的作用（为什么要使用spring的事务，一般在什么情况下使用）
2026年10月14日 05:40
2026年10月14日 04:50
linux怎么进入命令行（怎么样配置linux使其启动时直接登录到命令行模式）
2026年10月14日 02:00
java培训机构好还是大学好（大学生想转行学java，该去java培训班还是自学呢）
2026年10月13日 23:30
2026年10月13日 19:10
2026年10月13日 19:00
前端面试必背十个点（资深HR揭秘：Web前端面试技巧有哪些）
2026年10月13日 17:50
sqlplus重置用户名密码（Oracle中的plus的用户名和密码忘了怎么办）
2026年10月13日 17:40
