React-router 6

​
1.概述

React Router 以三个不同的包发布到 npm 上，它们分别为：

react-router: 路由的核心库，提供了很多的：组件、钩子。
react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等 。
react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:等。
与React Router 5.x 版本相比，改变了什么？

内置组件的变化：移除 ，新增 等。

语法的变化：component={About} 变为 element={}等。

新增多个hook：useParams、useNavigate、useMatch等。

官方明确推荐函数式组件了！！！

…

2.Component

1. < BrowserRouter>

说明：< BrowserRouter> 用于包裹整个应用。

示例代码：

import React from "react";
import ReactDOM from "react-dom";
import {
    BrowserRouter } from "react-router-dom";
 
ReactDOM.render(
  <BrowserRouter>
    {
   /* 整体结构（通常为App组件） */}
  </BrowserRouter>,root
);

2. < HashRouter>

说明：作用与< BrowserRouter>一样，但修改的是地址栏的hash值。
备注：6.x版本中< HashRouter>、< BrowserRouter> 的用法与 5.x 相同。

3. < Routes/> 与 < Route/>

v6版本中移出了先前的 ，引入了新的替代者：。

和 要配合使用，且必须要用包裹。

相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

属性用于指定：匹配时是否区分大小写（默认为 false）。

当URL发生变化时， 都会查看其所有子 元素以找到最佳匹配并呈现组件 。

也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。

示例代码：

<Routes>
    /*path属性用于定义路径，element属性用于定义当前路径所对应的组件*/
    <Route path="/login" element={
   <Login />}></Route>
 
        /*用于定义嵌套路由，home是一级路由，对应的路径/home*/
    <Route path="home" element={
   <Home />}>
       /*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/
      <Route path="test1" element={
   <Test/>}></Route>
      <Route path="test2" element={
   <Test2/>}></Route>
        </Route>
    
        //Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
    <Route path="users">
       <Route path="xxx" element={
   <Demo />} />
    </Route>
</Routes>

4. < Link>

作用: 修改URL，且不发送网络请求（路由链接）。

注意: 外侧需要用或包裹。

示例代码：

import {
    Link } from "react-router-dom";
 
function Test() {
   
  return (
    <div>
        <Link to="/路径">按钮</Link>
    </div>
  );
}

5. < NavLink>
   作用: 与组件类似，且可实现导航的“高亮”效果。
   示例代码：

// 注意: NavLink默认类名是active，下面是指定自定义的class
 
//自定义样式
<NavLink
    to="login"
    className={
   (