react-router-dom v6 使用
2024-04-09 17:18:08
react-router-dom
react-router-domv6整体体验相对于v5，体验要好更多，最大的一个改变，就是曾经的Route不可嵌套，整个路由配置必须拆分成若干小块，除非通过react-router-config这种插件，才可以实现对整个路由的管理，然而现在，不需要任何插件就可实现对路由配置的管理。
官网地址: react-router
当前例子，根据分支对应例子：react-router-dom-v6-example
v6 与 v5 的区别
当前环境
- 安装
npm install --save react-router-dom history
react,react-router-dom以及相关插件版本。
"dependencies": {"history": "^5.1.0","react": "^17.0.2","react-dom": "^17.0.2","react-router-dom": "^6.0.2"
}
- 如果是自己通过
webpack配置的项目，一定要在devServe中配置historyApiFallback，以及output.publicPath解决history模式页面刷新后出现404的情况。
devServer: {port,host,hot: true,open: true,historyApiFallback:{disableDotRule: true}
},// 以及 `output` 中的 publicPath
output: {path: path.resolve(__dirname, "../dist"),filename: "[name].[chunkhash].js",publicPath: '/'
},
使用
在入口文件中直接渲染 Router.tsx
// idex.tsx
import React from "react";
import ReactDOM from "react-dom";
import Router from "./router/Router";
import "./index";ReactDOM.render(<Router />, document.getElementById("root"));
1. Routes 组件替换 v5 的 Switch 组件；
Route组件必须使用Routes嵌套
// Router.tsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../home/Home";
import Goods from "../goods/Goods";
import Customer from "../customer/Customer";export default function Router() {{/* 所有的路由配置均在 BrowserRouter 内部 */}return (<BrowserRouter>{/* 使用 Routes 替换曾经的 Switch */}<Routes><Route path='/' element={<Home />} /><Route path='goods' element={<Goods />} /><Route path='customer' element={<Customer />} /></Routes></BrowserRouter>);
}
2. 跳转
- 通过
Link组件跳转；
// Customer.tsx
import React from "react";
import { Link } from "react-router-dom";export default function Customer() {return (<div><h2>Customer Page</h2><Link to="/goods"> to Goods</Link></div>);
}
- 通过
useNavigate方法跳转；
// Goods.tsx
import React from "react";
import { useNavigate } from "react-router-dom";export default function Goods() {const navigate = useNavigate();const handleClickToHome = () => {navigate("/");// history 的 replace 模式// navigate("/", { replace: true });};return (<div><h2>Goods Page</h2><button onClick={handleClickToHome}>to Home</button></div>);
}
3. 匹配未定义的路由
v6移除了Redirect组件，改用Navigate组件。
// Router.tsx
import React from "react";
import { BrowserRouter, Route, Routes, Navigate } from "react-router-dom";
import Home from "../home/Home";
import Goods from "../goods/Goods";
import Customer from "../customer/Customer";
import NotFound from "../not-found/NotFound";export default function Router() {{/* 所有的路由配置均在 BrowserRouter 内部 */ }return (<BrowserRouter>{/* 使用 Routes 替换曾经的 Switch */}<Routes><Route path='/' element={<Home />} /><Route path='goods' element={<Goods />} /><Route path='customer' element={<Customer />} />{/* 重定向到首页 */}<Route path="*" element={<Navigate to="/"/>} />{/* 或者跳转到 NotFound */}{/* <Route path="*" element={<NotFound />} /> */}</Routes></BrowserRouter>);
}
4. 嵌套路由与动态路由
- 嵌套路由的
path可以不用写父级，会直接拼接； - 动态路由通过
:style的形式实现； - 由于
/goods/list的匹配度大于/goods/*，所以输入精确地址，会精确匹配，而不是匹配到动态路由； - 嵌套路由必须在父级追加
Outlet组件，作为子级组件的占位符，类似于vue-router中的router-view。
// Router.tsx
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../home/Home";
import Goods from "../goods/Goods";
import Customer from "../customer/Customer";
import NotFound from "../not-found/NotFound";
import GoodsDetail from "../goods/goods-detail/GoodsDetail";
import GoodsList from "../goods/goods-list/GoodsList";export default function Router() {return (<BrowserRouter><Routes><Route path='/' element={<Home />}><Route path='goods' element={<Goods />} >{/* 动态路由 */}<Route path=":id" element={<GoodsDetail />}/><Route path="list" element={<GoodsList />}/></Route><Route path='customer' element={<Customer />} ></Route></Route><Route path="*" element={<NotFound />} /> </Routes></BrowserRouter>);
}
// Home.tsx
import React from "react";
import { Outlet, Link } from "react-router-dom";export default function Home() {return (<div><h1>Home</h1><p><Link to='/goods'>to goods</Link></p><p><Link to='/customer'>to customer</Link></p><Outlet /></div>);
}// Goods.tsx
import React from "react";
import { useNavigate, Outlet } from "react-router-dom";export default function Goods() {const navigate = useNavigate();const handleClickToHome = () => {navigate("/");// history 的 replace 模式// navigate("/", { replace: true });};return (<div><h2>Goods Page</h2><button onClick={handleClickToHome}>to Home</button>{/* 子路由的占位组件 */}<Outlet /></div>);
}
5. 获取路由的参数
useParams获取动态路由的值；useSearchParams获取查询字符串的值。
// GoodsDetail.tsx
import React,{ useEffect } from "react";
import { useParams, useSearchParams } from "react-router-dom";export default function GoodsDetail() {// 获取动态路由的值const params = useParams();// 获取查询字符串的值const [searchParams, setSearchParams] = useSearchParams();useEffect(() => {// 一个对象，key 为动态字符串的 keyconsole.log(params); // {id: '123'}// 一个对象，但是不可直接点出属性console.log(typeof searchParams); // object// 输入 http://localhost:3304/goods/123?name=nihaoconsole.log(searchParams.get("name")); // nihao}, []);const handleAddParams = () => {// 修改 查询字符串 的数据setSearchParams({name:"xxx"});};return (<div><h2 onClick={handleAddParams}>GoodsDetail Page</h2></div>);
}
6. 默认路由
当页面有多个子路由，比如在
/goods时，页面展示商品列表；/goods/:id时，展示某个商品的详情。
Route的index属性就是用来展示默认子路由的。
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../home/Home";
import Goods from "../goods/Goods";
import Customer from "../customer/Customer";
import NotFound from "../not-found/NotFound";
import GoodsDetail from "../goods/goods-detail/GoodsDetail";
import GoodsList from "../goods/goods-list/GoodsList";export default function Router() {return (<BrowserRouter><Routes><Route path='/' element={<Home />}><Route path='goods' element={<Goods />} >{/* 默认 子路由 ，在页面 路由为 /goods ，会展示该子路由 */}<Route index element={<GoodsList />}/><Route path=":id" element={<GoodsDetail />}/></Route><Route path='customer' element={<Customer />} ></Route><Route path="*" element={<NotFound />} /> </Route></Routes></BrowserRouter>);
}
7. 通过配置实现路由管理
useRoutes可以将数组对象形式的路由，直接在页面上使用。
// 入口文件，src/index.tsx
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import "./index";ReactDOM.render((<BrowserRouter><App /></BrowserRouter>
), document.getElementById("root"));// src/router/routes.tsx
import React from "react";
import { RouteObject } from "react-router-dom";
import Home from "../home/Home";
import Goods from "../goods/Goods";
import Customer from "../customer/Customer";
import NotFound from "../not-found/NotFound";
import GoodsDetail from "../goods/goods-detail/GoodsDetail";
import GoodsList from "../goods/goods-list/GoodsList";const routes: RouteObject[] = [{path: "/",element: <Home />,children: [{path: "/goods",element: <Goods />,children: [{ index: true, element: <GoodsList /> },{ path: ":id", element: <GoodsDetail /> }]},{path: "/customer",element: <Customer />,},{path: "*",element: <NotFound />,},]}
];export default routes;// src/App.tsx
import React from "react";
import { useRoutes } from "react-router-dom";
import routes from "./router/routes";export default function App() {const element = useRoutes(routes);return (<>{element}</>);
}react-router-dom v6 使用相关推荐
- React Router 升级 v6: Redirect 重定向替代方案
React Router 升级 v6: Redirect 重定向替代方案 文章目录 React Router 升级 v6: Redirect 重定向替代方案 React Router v6 Redir ...
- react router
目录 前言 核心 1.内置的组件 2.内置的路由器组件 3.History 对象 4.Location 对象 5.react router 的安装包 一.React-Router v1 1.一些概念 ...
- React Router V6 新特性
安装 npm install react-router-dom@6 配置路由 import { render } from "react-dom"; import {Browser ...
- React Router v6 的路由切换实现方式
首先需要先引入路由库,并配置好路由规则. 在React Router v6中,可以使用<Routes>和<Route>组件来定义路由规则. 例如: # 使用<Routes ...
- 在React中使用React Router v6
具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页.这可以通过使用诸如React Router之类的路由库来处理. 在本教程中,让我们看看如何使 ...
- 使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
- 初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
- React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
- React Router路由详解
React Router路由详解 一.基础 1.安装使用 2.React Router 中通用的组件 路由组件 BrowserRouter 和 HashRouter 路径匹配组件: Route 和 S ...
- React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由 在React router中有三种类型的 ...
最新文章
- [MySQL FAQ]系列 -- MySQL支持绑定到多个ip上吗
- Linux入门基础教程之Linux下软件安装
- 谁来搬走冷链物流头上的三座大山
- iOS_24_画画板(含取色板)
- H.264编解码标准的核心技术（提供相关流程图）
- 我是程序员，我比较喜欢有纪律的团队。
- SpringBoot 系列
- 云数据库和本地数据库有什么区别？
- NXP MC9S12中断寄存器配置说明
- 深信服虚拟服务器 视频教程,5分钟，轻松玩转深信服服务器虚拟化
- 名悦集团：开电动车会比开燃油车省钱吗？
- R语言 PDF文件损坏或打不开
- 频谱仪和信号发生器的使用
- 金蝶云星空与旺店通集成解决方案（旺店通主管库存）
- 基于niua框架的Excel的导出
- C++学习记录8：定义一个分数类Score和学生类Student
- ubuntu安装armadillo说明
- python 奶茶系统2.0
- Rails：通过IP地址确定城市
- go每日新闻(2021-09-23)——Go 微服务框架对比