1. 路由环境配置

react-router-dom 版本要在 v6 以上

1. 安装依赖

npm install react-router-dom -S

2. 在入口 index.js 引入，并使用路由模式组件包裹根组件
   根据需求选择 HashRouter 还是 BrowserRouter，默认是 BrowserRouter

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

注意：

路由模式
hash 模式： HashRouter
histroy 模式： BrowserRouter
其中 hash 模式 url 路径上显示 # ，histroy 模式需要后端配合配置

2. 路由跳转的几种方式

1. Link、NavLink

在 App.js 中，通过 Link 或者 NavLink 组件，进行导航跳转

import React from "react";
import { Link, Route, Routes } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
  console.log(props);
  return (
    <div>
      <div>
        {/* link 导航 */}
        {/* 也使用 NavLink，相比link 它多了一个点击时的 active 类，可以设置点击时样式 */}
        <Link to="/child1">Link: go to child1</Link> |{" "}
        <Link to="/child2">Link: go to child2</Link>
      </div>
      <div>
        {/* 定义路由出口 */}
        <Routes>
          {/* 根组件默认展示 */}
          {/* <Route path="/" element={<Child1 />} /> */}
          {/* 路由重定向 */}
          <Route path="/" element={<Navigate to="/Child1" />} />

          <Route path="/child1" element={<Child1 />} />
          <Route path="/child2" element={<Child2 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

2. navigate() 路由跳转

在 App.js 中，通过 react-router-dom 中的 useNavigate() 方法，进行编程式导航跳转
注意：withRouter 在 react-router-dom v6 版本中已被弃用

import React from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
  const navigate = useNavigate();
  return (
    <div>
      <div>
        {/* 编程式导航导航 */}
        <button
          onClick={() => {
            navigate("/child1");
          }}
        >
          onClick: go to child1
        </button>
        <button
          onClick={() => {
            navigate("/child2");
          }}
        >
          onClick: go to child2
        </button>
      </div>
      <div>
        {/* 定义路由出口 */}
        <Routes>
          {/* 根组件默认展示 */}
          {/* <Route path="/" element={<Child1 />} /> */}
          {/* 路由重定向 */}
          <Route path="/" element={<Navigate to="/Child1" />} />

          <Route path="/child1" element={<Child1 />} />
          <Route path="/child2" element={<Child2 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

3. navigate(path,{replace: true}) 路由跳转，清除历史记录

此方式跳转会删除历史记录，使用和传参方式和 navigate() 相同，只是增加 {replace: true}参数
Link组件也可以使用 replace 方式，只需要在Link标签上添加 replace 属性即可

navigate('/child1/child1B',{replace: true})

4. navigate(num) 路由跳转，前进、后退

// 历史记录 前进
navigate(1)

// 历史记录 后退
navigate(-1)

// 历史记录 后退两步
navigate(-2)

3. 嵌套路由

方式一：分离式

1. 配置一级路由结构

   在一级路由 App.js 中，拥有子路由的路由需要在 path 最后加上 /*

import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
  console.log(props);
  return (
    <div>
      <div>
        <Link to="/child1">Link: go to child1</Link> |{" "}
        <Link to="/child2">Link: go to child2</Link>
      </div>
      <div>
        {/* 定义路由出口 */}
        <Routes>
          {/* 根组件默认展示 */}
          {/* <Route path="/" element={<Child1 />} /> */}
          {/* 路由重定向 */}
          <Route path="/" element={<Navigate to="/Child1" />} />

          <Route path="/child1/*" element={<Child1 />} />
          <Route path="/child2" element={<Child2 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

2. 配置子路由结构
   在 Child1.js 中，link 标签中要写全路径，路由出口的 path 中只写路由名称

import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";

export default class Child1 extends Component {
  render() {
    return (
      <div>
        <div>
          <Link to="/child1/child1A">Link: go to Child1A</Link> |{" "}
          <Link to="/child1/child1B">Link: go to Child1B</Link>
        </div>
        <div>
          {/* 定义路由出口 */}
          <Routes>
       
            {/* 路由重定向 */}
            {/* <Route path="/" element={<Navigate to="/Child1A" />} /> */}
            {/* 根组件默认展示 */}
            <Route path="/" element={<Child1A />} />

            <Route path="child1A" element={<Child1A />} />
            <Route path="child1B" element={<Child1B />} />            
          </Routes>
        </div>
      </div>
    );
  }
}

方式二：集合式

1. 配置嵌套路由结构
   在 App.js 中，以 Route 组件嵌套的方式配置嵌套路由结构

import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
import Child1A from "./components/Child1A";
import Child1B from "./components/Child1B";
function App() {
  return (
    <div>
      <div>
        <Link to="/child1">Link: go to child1</Link> |{" "}
        <Link to="/child2">Link: go to child2</Link>
      </div>
      <div>
        {/* 定义路由出口 */}
        <Routes>
          <Route path="/" element={<Navigate to="/Child1/child1A" />} />
          <Route path="/child1" element={<Child1 />}>
            <Route path="child1A" element={<Child1A />} />
            <Route path="child1B" element={<Child1B />} />
          </Route>
          <Route path="/child2" element={<Child2 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

2. 定义子子路由出口
   在 Child1.js 中，引入 Outlet 并定义出口位置

import React, { Component } from "react";
import { Link, Outlet } from "react-router-dom";

export default class Child1 extends Component {
  render() {
    return (
      <div>
        <div>
          <Link to="/child1/child1A">Link: go to Child1A</Link> |{" "}
          <Link to="/child1/child1B">Link: go to Child1B</Link>
        </div>
        <div>
          {" "}
          <Outlet />
        </div>
      </div>
    );
  }
}