因为之前搭建的 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 方式 似乎已经被替代)。
其中路由部分的改动 请参考 6V版本变化
注意:
如果想要使用useNavigate() 进行路由跳转页面
import { useNavigate }from "react-router-dom"; 在 export default function Login() { } 内部使用(hook写法只能在函数里)。
如图
这里 我干脆就将 登录的页面 作为一个组件 引入 了其他页面 如图
这样的话如果 如果有其他需求 需要传参什么的 就 相对比较容易了(如果想练习一下组件传参 就可以将 login 页面拆分一下 ,即可 )。