【react 中router v6 与 v5 区别】

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 中获取参数的方法 

​​​​​​​