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

前言

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

V6 & V5

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

  1. 组件结构变化 :

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

    js 复制代码
    import { Routes, Route } from 'react-router-dom';
    
    function App() {
      return (
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      );
    }
  2. 导航链接 :

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

    [```jsx
    import { Link } from 'react-router-dom';

    function Navigation() {
    return (

    ); } ```](/users/me)

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

javascript 复制代码
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. 重定向
    Navigate代替Redirect组件,实现重定向。 组件是用于在组件内部进行编程式导航的,不应该用于定义路由规则或路由重定向。路由的定义应该在 组件中完成。
javascript 复制代码
import { Route } from 'react-router-dom';

function MyComponent() {
// 在需要的地方执行重定向逻辑
// 例如,可以根据某些条件进行重定向
const shouldRedirect = true;
return (
<Route
path="/"
element={
shouldRedirect
? <Navigate to="/new-path" replace />
: <YourComponent />
}
/>
);
}
  1. 路由参数 :
    React Router 6 采用了新的方式来处理路由参数。参数现在是在路由路径中使用冒号进行定义,然后可以在组件中通过 useParams 钩子来访问。
jsx 复制代码
// 路由定义
<Route path="/user/:id" element={<User />} />

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

function User() {
const { id } = useParams();
// 使用 id
}
  1. 嵌套路由 :
    React Router 6 支持更灵活的嵌套路由。您可以在路由配置中使用 <Routes> 组件来定义嵌套路由。
js 复制代码
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>
);
}
```](/users/me)

### [](/users/me)使用示例

入口文件index.tsx如下

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

App组件:

javascript 复制代码
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组件

javascript 复制代码
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;

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

相关推荐
Boilermaker19921 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子1 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10241 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y2 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁2 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry2 小时前
Fetch 笔记
前端·javascript
拾光拾趣录2 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟2 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan2 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson2 小时前
青苔漫染待客迟
前端·设计模式·架构