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

heiyay

已于 2023-12-07 22:19:38 修改

阅读量438

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

于 2023-10-27 19:35:09 首次发布

本文链接：https://blog.youkuaiyun.com/study_way/article/details/134051181

本文介绍了ReactRouter6的重大升级，包括组件结构变化（如使用<Routes>替换<Switch>），新的导航链接和导航管理方法，路由参数处理，嵌套路由以及导航组件的更新。作者通过实例演示了如何在新版本中正确配置和使用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

V6 & V5

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

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

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

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

导航链接:
React Router 6 引入了 <Link> 组件，用于创建导航链接。 v6 中消除了这种歧义模糊的写法，在下，无论当前 url 是否拥有后斜杠，将始终被渲染为<a href="/users/me" />
```
import { Link } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}
```

3.useNavigate
useNavigate 代替了之前的useHistory。useNavigate 钩子返回了一个函数 navigate，当用户点击按钮时，它会调用 navigate('/new-path') 来导航到指定的路由。这允许您以编程方式控制用户在应用程序中的导航，而无需依赖导航链接或其他用户界面元素。

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>
  );
}

重定向
Navigate代替Redirect组件，实现重定向。<Navigate> 组件是用于在组件内部进行编程式导航的，不应该用于定义路由规则或路由重定向。路由的定义应该在 <Route> 组件中完成。

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

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

路由参数:
React Router 6 采用了新的方式来处理路由参数。参数现在是在路由路径中使用冒号进行定义，然后可以在组件中通过 useParams 钩子来访问。

// 路由定义
<Route path="/user/:id" element={<User />} />

// 在组件中获取参数
import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  // 使用 id
}

嵌套路由:
React Router 6 支持更灵活的嵌套路由。您可以在路由配置中使用 <Routes> 组件来定义嵌套路由。

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/user/:id" element={<User />}>
        <Route index element={<UserProfile />} />
        <Route path="posts" element={<UserPosts />} />
      </Route>
    </Routes>
  );
}

使用示例

入口文件index.tsx如下

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
    <App />
);

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>
  );
}

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;