前言
之前一直使用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> ); }
- useNavigateuseNavigate 代替了之前的useHistory。useNavigate 钩子返回了一个函数 navigate，当用户点击按钮时，它会调用 来导航到指定的路由。这允许您以编程方式控制用户在应用程序中的导航，而无需依赖导航链接或其他用户界面元素。
import { Routes, Route } from 'react-router-dom'; function App() { return ( <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> ); }
重定向Navigate代替Redirect组件，实现重定向。组件是用于在组件内部进行编程式导航的，不应该用于定义路由规则或路由重定向。路由的定义应该在组件中完成。
路由参数: React Router 6 采用了新的方式来处理路由参数。参数现在是在路由路径中使用冒号进行定义，然后可以在组件中通过useParams钩子来访问。
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 支持更灵活的嵌套路由。您可以在路由配置中使用
<Routes>组件来定义嵌套路由。
// 路由定义 <Route path="/user/:id" element={<User />} /> // 在组件中获取参数 import { useParams } from 'react-router-dom'; function User() { const { id } = useParams(); // 使用 id }
6.嵌套路由: 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;
例子就是这个样子的，这里没调样式
