【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 (

   


   

          .......//路由代码

  

  

  );

} 

2.v6中的变化

不再使用component,改为了element

注：element的值为组件标签，不要忘记写成标签形式

Route标签必须包含在Routes标签里，不然会报错

代码如下：

第一种：
改为：
 }> 


第二种：
改为： 
 }> 

3.v6中，exact属性不再需要（v6默认精准匹配）

但是如果需要旧的行为，路径后加/*

} />

} /> 

4.v6中，Route先后顺序不再重要，React  Router能够自动找出最优匹配路径

5.v6保留Link,NavLink,但是NavLink的activeClassName属性被移除

删除了 activeClassName 样式，如果想自己给它设置想要的highligh样式.

可以通过style属性修改actived的状态, 通过箭头函数接收到isActive参数值;

style接收一个css样式数据返回值进行修改 active状态样式 

import { NavLink } from "react-router-dom";



export default function Invoices() {

return (



 {

  return {

  display: "block",

  margin: "1rem 0",

  color: isActive ? "red" : ""

            };

        }}



to={`/invoices`}

>





  );

}
// or
 isActive ? "red" : "blue"} /> 

6.v6移除Redirect组件，改为使用Navigate

} />

是对旧的Redirect的完整取代。replace属性也可以省略，不过行为由replace改为push

7. v6嵌套路由改为相对匹配

嵌套路由必须放在中，且使用相对路径，不再像v5那样必须提供完整路径，因此路径变短

}>

    } />

    }>

    }>

    }>

 

8.使用Outle组件，此组件是一个占位符，告诉React Router嵌套的内容应该放到哪里

import {Outlet} from "react-router-dom";

const Login=() => {

return



  
Login

  



}


export default Login; 

9.使用index指定默认路由，或者path为空 

当嵌套路由有多个子路由的时候，可以增加index属性来指定默认路由

function App()

  return (

    

      }>

      } />

      } />

      } />

      

    

   );

}

或者指定默认路由也可以设置path为空

let router  =[{

  path: "/home",

  element :,

  children: [

    {

    path:"",

    element:

    },

    {

    path: " news " ,

    element:

    }

  ]

}] 

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

​​​​​​​