React中的react-router-dom路由 V5和V6的区别

1.V5中Switch换成Routes标签

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

function App() {

return (

   <div>

       <Routes>
          .......

      </Routes>

  </div>

  );

} 

2.V5中exact属性没有了，V6默认是精准匹配

v6 内部算法改变，不再需要加exact实现精确匹配路由，默认就是匹配完整路径。如果需要旧的行为，路径后加/*

<Route path="/products/*" element={<Products />} />

<Route path="/products/:productId" element={<ProductDetail />} />

3.V5中的component属性，V6用的element，element属性是组件标签

注：

1. element 的值为组件标签，不要忘记写成标签形式
2. Route 标签必须包含在Routes标签里，会不然报错

<Route path="/home" >

    <Index />

</Route>

<Route path='/login' component={Login}></Route>

 改为：

<Route path="/home" element={ <Index /> }></Route>

<Route path='/login' element={ <Login /> }></Route>

4.V6中重定向导航组件换成Navigate

<Route path="/" element ={<Navigate replace to="/welcome" />} />

5.V6中路由嵌套直接采用组件包裹的方式，可以不适用path绝对路径

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

<Routes path='/about' element={<About />}>

    <Route index element={<Address />} />

    <Route path='address' element={<Address />}></Route>

    <Route path='information' element={<Information />}></Route>

    <Route path='joinus' element={<Join />}></Route>

</Routes>

6.V6中的<Outlet>相当于vue中router-view

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


const Welcome=() => {
    return (
        <section>
          <h1>Welcome</h1>
          <Outlet />
        </section>
)}

export default Welcome;

7.获取参数和Hooks方法的变化

8.props获取V6中props值没有参数数据，必须采用Hooks的路由获取数据

9.withRouter在V6版本中也被去掉了

10.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"} />

11.v6 用useNavigate实现编程式导航，useHistory被移除

import {useNavigate} from "react-router-dom";
const navigate = useNavigate();
navigate("/welcome");   // push

如果要重定向:

navigate("/welcome",{replace:true});

除此之外，还可以使用navigate(-1)后退到前一页，使用navigate(-2)后退到前一页的前一页，navigate(1)前向导航，依此类推。

12. hooks 中获取参数的方法

• useParams：返回当前动态路由参数

function Profile() {
  const params = useParams()
  console.log(params.userId)
  return ()
}

• useSearchParams

        使用 useSearchParams hook 来访问查询参数(/xx/xx?userId=123)。其用法和 useState 类似，会返回当前对象和更改它的方法。

        更改 searchParams 时，必须传入所有的查询参数，否则会覆盖已有参数。

function Profile() {
  const params = useSearchParams()
  console.log(params.userId)
  return ()
}

13. useRoutes 声明式的路由配置方式

声明式路由中，不能写index, 可以让path: "" , 来实现显示默认组件;

useRoutes函数，会返回已经渲染好的路由元素

let element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
          {
            path: "",
            element: <DashboardMessages />
          },
          {
            path: "/messages",
            element: <DashboardMessages />
          },
          { path: "/tasks", element: <DashboardTasks /> }
      },
      { path: "/team", element: <AboutPage /> }
    ]);