如何使用react-router v6快速搭建路由？

前言

之前一直使用react-router V5，上次搭建一个小项目，下载的react-router V6， 本以为没什么区别，就按照v5的那一套用了，区区小功能，奈何不了我的。然后自信满满的运行，哦豁，不生效，点击也没反应，不应该呀，然后就网上查了一下，确实不一样了，改动还不少呢，顺便去瞄了一眼官方文档，折腾一番，完美解决。

V6 & V5

React Router 6 是 React Router 库的一个重大升级，它引入了一些重要的变化和新功能，以提供更好的路由管理体验。以下是 React Router 6 的一些主要改进和变化，以及相应的代码示例和用法：

1. 组件结构变化:
   React Router 6 引入了新的组件结构。原来的 组件被移除，取而代之的是一个新的 组件，它用于定义路由层次结构。

   import { Routes, Route } from 'react-router-dom';
   
   function App() {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/about" element={<About />} />
       </Routes>
     );
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

2. 导航链接:
   React Router 6 引入了 组件，用于创建导航链接。 v6 中消除了这种歧义模糊的写法，在下，无论当前 url 是否拥有后斜杠，将始终被渲染为

   import { Link } from 'react-router-dom';
   
   function Navigation() {
     return (
       
     );
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

import { useNavigate } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();

  const handleNavigation = () => {
    navigate('/new-path');
  };

  return (
    <div>
      <button onClick={handleNavigation}>Go to New Path</button>
    </div>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

import { Route } from 'react-router-dom';

function MyComponent() {
  // 在需要的地方执行重定向逻辑
  // 例如，可以根据某些条件进行重定向
  const shouldRedirect = true;
  return (
    <Route
      path="/"
      element={
        shouldRedirect
          ? <Navigate to="/new-path" replace />
          : <YourComponent />
      }
    />
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

使用示例

入口文件index.tsx如下

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
    <App />
);
1
2
3
4
5
6

App组件：

import React from "react";
import { Routes, Route, Navigate, BrowserRouter } from "react-router-dom";
import * as hhh from 'react-router-dom'
import Hmoe from "@/pages/index";
import Login from "@/pages/index";
export default function routers() {
  console.log("gfb", hhh);
  
  return (
    <div style={{height:'100%'}}>
      <BrowserRouter>
        <Routes>
        // 注意这里的/*  不加上，Home组件下路由无法匹配
          <Route path="/home/*" element={<Hmoe />}></Route>
          <Route path="/login" element={<Login />}></Route>
          // 重定向的写法
          <Route path="/" element={<Navigate to="/home" />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Home组件

import React from "react";
import { Routes, Route, Link } from "react-router-dom";

import EditorTable from "./DropTree/EditorTable";
import UploadCom from "@/components/Upload";
import Todolist from "@/pages/MyUseContext/TodoList";
import Routers from "@/pages/Routers/index";

import "./style.less";

const AppIndex = () => {
  return (
    <div className="pageRoot">
      <div className="left-demo">
        <div style={{ height: 32 }}>
          <Link to="/home/upload">上传文件</Link>
        </div>
        <div style={{ height: 32 }}>
          <Link to="/home/todolist">todolist</Link>
        </div>
        <div style={{ height: 32 }}>
          <Link to="/home/editorTable">可编辑Table</Link>
        </div>
        <div style={{ height: 32 }}>
          <Link to="/home/testRoute">Prompt</Link>
        </div>
      </div>
      <div className="right-bigData">
        <Routes>
        // 这里就省略了/home 
          <Route path="/upload" element={<UploadCom />} />
          <Route path="/todolist" element={<Todolist />} />
          <Route path="/editorTable" element={<EditorTable />} />
          <Route path="/testRoute" element={<Routers />} />
        </Routes>
      </div>
    </div>
  );
};
export default AppIndex;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

例子就是这个样子的，这里没调样式