import {useNavigate} from "react-router-dom"; const navigate = useNavigate(); navigate("/login"); // push
1.v6中的Switch名称变为Routes
代码如下：
import { Routes } from "react-router-dom"; function App() { return ( <div> <Routes> .......//路由代码 </Routes> </div> ); }
2.v6中<Route>的变化
不再使用component,改为了element
注：element的值为组件标签，不要忘记写成标签形式
Route标签必须包含在Routes标签里，不然会报错
代码如下：
第一种： <Route path="/login" ><Index /></Route>改为： <Route path="/login" element={ <Index /> }></Route> 第二种： <Route path='/home' component={Home}></Route>改为： <Route path='/home' element={ <Home/> }></Route>
3.v6中，exact属性不再需要（v6默认精准匹配）
但是如果需要旧的行为，路径后加/*
<Route path="/products/*" element={<Products />} /> <Route path="/products/:productId" element={<ProductDetail />} />
4.v6中，Route先后顺序不再重要，React Router能够自动找出最优匹配路径
5.v6保留Link,NavLink,但是NavLink的activeClassName属性被移除
删除了 activeClassName 样式，如果想自己给它设置想要的highligh样式.
可以通过style属性修改actived的状态, 通过箭头函数接收到isActive参数值;
style接收一个css样式数据返回值进行修改<NavLink> active状态样式
import { NavLink } from "react-router-dom"; export default function Invoices() { return ( <div style={{ display: "flex" }}> <NavLink style={({ isActive }) => { return { display: "block", margin: "1rem 0", color: isActive ? "red" : "" }; }} to={`/invoices`} > </NavLink> </div> ); } // or <NavLink className={({ isActive }) => isActive ? "red" : "blue"} />
6.v6移除Redirect组件，改为使用Navigate
<Route path="/" element ={<Navigate replace to="/welcome" />} />
<Navigate replace to="/welcome">是对旧的Redirect的完整取代。replace属性也可以省略，不过行为由replace改为push
7. v6嵌套路由改为相对匹配
嵌套路由必须放在<Routes></Routes>中，且使用相对路径，不再像v5那样必须提供完整路径，因此路径变短
<Route path='/about' element={<About />}> <Route index element={<Address />} /> <Route path='address' element={<Address />}></Route> <Route path='infor' element={<Infor />}></Route> <Route path='login' element={<Login/>}></Route> </Route>
8.使用Outle组件，此组件是一个占位符，告诉React Router嵌套的内容应该放到哪里
import {Outlet} from "react-router-dom"; const Login=() => { return <section> <h1>Login</h1> <Outlet /> </section> } export default Login;
9.使用index指定默认路由，或者path为空
当嵌套路由有多个子路由的时候，可以增加index属性来指定默认路由
function App() return ( <Routes> <Route path="/" element={<Layout />}> <Route index element={<About />} /> <Route path="user" element={<User />} /> <Route path="about" element={<About />} /> </Route> </Routes> ); }
或者指定默认路由也可以设置path为空
let router =[{ path: "/home", element :<Home/ >, children: [ { path:"", element:<News/> }, { path: " news " , element:<News/> } ] }]
10.v6使用useNavigate实现编程式导航，useHistory被移除
import {useNavigate} from "react-router-dom"; const navigate = useNavigate(); navigate("/login"); // push
但是如果要重定向，如下：
navigate("/login",{replace:true});
还可以使用navigate(-1)后退到前一页，使用navigate(-2)后退到前一页的前一页，navigate(1)前向导航
11.hooks 中获取参数的方法
