一文搞定react-router-dom最新版V6路由的入门及使用

已于 2024-04-17 16:41:09 修改
阅读量1.1k 收藏 18
点赞数 22
文章标签： react.js 前端 javascript
于 2024-03-07 23:59:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38188228/article/details/136549361
版权

本文主要以react-router-dom v6版本为主，旧版过多概念不介绍，想必诸位应该也知道该库是做什么用的 😅，主要引领大家入门了解 react-router-dom 的使用，快速上手最新React Router v6 版本。

导航目录

一、安装

首先，确保你已经安装了Node.js和npm或yarn。然后，在项目的根目录下运行以下命令来安装react-router-dom。

👉 打开你的终端并使用 Vite 引导一个新的 React 应用程序：

#第一步执行安装命令
npm create vite@latest demo-react-vite -- --template react
# 切换到项目根目录
cd demo-react-vite
# 安装项目依赖
npm install
# 运行项目
npm run dev
# 安装react-router-dom
npm install react-router-dom

目前这里最新的版本为：

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.2"

二、路由模式

React Router 支持两种路由模式：BrowserRouter 和 HashHistory。

  1. BrowserRouter 模式使用 URL 中的/来定义路由，例如：http://xxx.com/about。
  2. HashHistory 模式使用 URL 中的#来定义路由，例如：http://xxx.com/#/about。
  • 默认情况下，React Router 使用 BrowserRouter 作为其历史记录。
    注意：BrowserRouter组件最好放在最顶层所有组件之外，这样可以确保内部组件在使用 Link 做路由跳转时不会出现出错

三、路由组件

路由组件是用于处理路由的组件。在 React Router 中，路由组件通常用于显示不同的页面或视图。

3.1 创建路由组件

在项目src目录中创建一个App.jsx的文件，并在其中编写示例代码 👇

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function Home() {
	return <div>Home</div>;
}

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

3.2 Route 组件

Route组件用于定义路由规则。Route组件接收两个属性：path和element。path属性用于定义路由的路径，element属性用于定义路由对应的组件，index属性用于指定默认子路由。

  • 注意element属性值必须写成标签的形式
  • Route组件可以嵌套使用，用于定义更复杂的路由规则。
    • 嵌套路由可以不在向旧版一样提供完整的路径，因此新版本路径书写变短,但访问路径还是需要完整路径如/about/joinus
<Route path="/about" element={<About />}>
	<Route index element={<Address />} />
	<Route path="address" element={<Address />}></Route>
	<Route path="joinus" element={<Join />}></Route>
</Route>
  • 在新版中Route先后顺序不在重要，Router Route可以自动匹配正确的路径
  • 使用index属性可以指定默认子路由
  • 或通过 path 为空，来指定默认路由
const router = [
	{
		path: '/home',
		element: <Home />,
		children: [
			{
				path: '',
				element: <News />,
			},
			{
				path: 'news',
				element: <About />,
			},
		],
	},
];
  • 该组件必须包含在Routes组件中

3.3 Routes 组件

Routes组件是之前版本种Switch组件的变名，抓哟用于将多个Route组件组合在一起。

3.4 Link、NavLink 组件

Link和NavLink组件类似于 a 标签，用于创建路由链接。Link组件接收一个to属性，用于指定链接的地址，NavLink组件相似，区别是可以添加一些样式来区分当前页面。

一共两种形式，如下代码示例 👇

  1. 通过 style 的形式
<NavLink
	to="/about"
	style={({ isActive }) => {
		return {
			color: isActive ? 'red' : '#000',
			fontWeight: 'bold',
		};
	}}
>
	首页
</NavLink>
  1. 通过 css 的形式
<NavLink
	to="/about"
	className={({ isActive }) => {
		return isActive ? 'active' : '';
	}}
>
	首页
</NavLink>

3.5 Navigate 组件

Navigate组件是对旧版本的 Redirect 的替代品。

如下代码示例 👇

import { Navigate } from 'react-router-dom';
<Route path="/" element={<Navigate replace to="/home" />} />;
  • 其中replace属性也可以省略，不过路由的行为由 replace 改为 push
  • replace Vs push
  • replace 替换当前 history 记录，没有历史记录
  • push 添加新的 history 记录，可以回退到上一页

3.6 Outlet 组件

Outlet组件用于在路由被匹配时，渲染匹配到的路由组件。用于占位，告诉 React Router 嵌套的内容应该显示在哪里。

如下代码示例 👇

export default function App() {
	return (
		<div className="container">
			<h2>关于我们</h2>
			<ul>
				<li>
					<Link to="/about/address">公司地址</Link>
				</li>
				<li>
					<Link to="/about/join">加入我们</Link>
				</li>
			</ul>
			<div className="boxs">
				<Outlet />
			</div>
		</div>
	);
}

四、声明式路由

4.1 useRoutes 声明式的路由配置方式

在声明式路由中，不能写index, 但可以让 path: “” , 来实现显示默认组件;

如下代码示例 👇

const MyRoutes = () => {
	return useRoutes([
		{
			path: '/',
			element: <Home />,
		},
		{
			path: '/home',
			element: <Home />,
		},
		{
			path: '/about',
			element: <About />,
			children: [
				{
					path: '',
					element: <Story />,
				},
				{
					path: 'address',
					element: <Address />,
				},
			],
		},
	]);
};
function App() {
	return (
		<div>
			<Router>
				<MyRoutes />
			</Router>
		</div>
	);
}
export default App;

五、编程式导航

编程式导航就是通过 JS 代码来控制路由的跳转，包括路由的跳转、路由的参数传递、路由的钩子函数等。

5.1 路由跳转useNavigate函数

useNavigate 函数用于获取路由导航的函数，该函数可以接收一个参数，表示要跳转到的路由地址。同时新版本中移除了useHistory 函数。

  • params传参方式，地址会如：/home/1。
  • search传参方式，地址会如：/home?id=1。
  • state传参方式，地址栏中不会显示

如下代码示例 👇

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home'); // 默认是以push的形式跳转
5.1.1 push的方式

跳转到指定路由，并生成历史记录

  • 携带params参数

路由设计格式为：<Route path="about" element={<About/>} />

navigate(`/home/${id}`);
  • 携带search参数

路由设计格式为：<Route path="about/:id/:keyword" element={<About/>} />

navigate(`/home/${id}/${keyword}`);
  • 携带state参数

路由设计格式，以上两种方式都可以

  1. 第一种
navigate('/home', { state: { id: '1' } });
  1. 第二种
<NavLink
	to={`detail`}
	state={{
		id: 1,
	}}
>
	首页
</NavLink>
5.1.2 replace方式

跳转到指定路由，并替换当前历史记录

  • 携带params参数
navigate(`/home/${id}`, { replace: true });
  • 携带search参数
navigate(`/home/${id}/${keyword}`, { replace: true });
  • 携带state参数
navigate('/home', { state: { id: '1' }, replace: true });
5.1.3 返回上一页

使用navigate(-1)后退到前一页，navigate(-2)后退到前两页。

5.2 获取路由参数

通过React Router提供的函数，从而获取解析地址栏中的参数。
注意：在最新版路由中组件不能直接从props中获取参数

5.2.1 useParams 函数

useParams 函数用于获取地址栏中的params参数，其路由地址参考为localhost:3000/home/1。

如下代码示例 👇

import { useParams } from 'react-router-dom';
function Home() {
	// 当前路径/home/1
	const params = useParams();
	console.log(params); // 输出：{ id: '1' }
	return <div>Home</div>;
}
5.2.2 useSearchParams 函数

useSearchParams 函数用于获取地址栏中的search参数，其路由地址参考为localhost:3000/home?id=1。

其中返回的searchParams函数，具有以下方法：

  • searchParams：表示地址栏中的search参数，通过.get方法获取指定数据。
  • setSearchParams：表示设置地址栏中的search参数。
  • 在更改地址栏中的search参数时，必须传入所有的查询参数，否则会覆盖已经有的参数

如下代码示例 👇

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

function Home() {
	// 当前路径为/home?id=1
	const [searchParams, setSearchParams] = useSearchParams();
	console.log(searchParams.get('id')); // 输出：1
	// setSearchParams({ id: '2' }); // 设置地址栏中的search参数为id=2
	return <div>
		<h1>Home</h1>
		<button onClick={()=> setSearchParams({id:2})}>修改search参数</button>
	</div>;
}
5.2.3 useLocation 函数

useLocation 函数用于获取地址栏中的search和params参数。
返回的location对象，具有以下属性：

  • pathname：表示地址栏中的路径，地址如：/home?id=1。
  • search：表示地址栏中的search参数，地址如：/home/1。
  • state：表示传递的state参数，该参数不会在地址栏中展示。

如下代码示例 👇

import { useLocation } from 'react-router-dom';
function Home() {
	const location = useLocation();
	console.log(location.pathname); // 输出：/home
	console.log(location.search); // 输出：?id=1&keyword=react
	console.log(location.state); // 输出：{ id: '1' }
	// 可以直接结构
	const {
		pathname,
		search,
		state: { id },
	} = useLocation();
	console.log(id); // 输出：1
	return <div>Home</div>;
}

5.3 类组件中获取路由参数

在类组件中不可以和函数组件使用的方式一致，需要通过HOC高阶组件封装，如直接使用会报错。

  • 报错信息：
    Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. You might have more than one copy of React in the same app.

大致意思就是说无效的hooks调用，hooks只能在函数组件的主体内部调用，那么已经使用了class组件的形式，又不想修改为函数组件，要如何使用呢？答案就是使用HOC高阶组件包装一下。封装如下HOC代码 👇

import { useParams, useSearchParams, useLocation, useNavigate } from "react-router-dom";

function withRouter(Component) {
 return  function RouterProps(props) {
 	const params = useParams();
    const location = useLocation();
    const searchParams = useSearchParams();
    const navigate = useNavigate();
    return (
      <Component
        {...props}
        router={{ params, location, searchParams, navigate }}
      />
    );
  }
}

使用方式如下 👇

import React from "react";
import withRouter from './withRouter';

class ClassComponent extends React.Component {
	componentDidMount() {
		const params = this.props.params
		console.log('params：', params)
	}
}
export default withRouter(ClassComponent)

六、路由懒加载

在React中，使用import()函数来实现路由的懒加载。通过import()函数，可以异步加载路由组件，提高页面加载速度。

  1. 创建一个Suspense组件，用于包裹需要懒加载的路由组件。

  2. 使用@loadable/component库来加载路由组件。

  • 👉 安装依赖
# npm的形式
npm install @loadable/component
# yarn的形式
yarn add @loadable/component
  • 如下代码示例 👇
import React from 'react';
// 导入@loadable/component，来加载路由
import loadable from '@loadable/component';

const Home = loadable(() => import('...component path'));
const About = loadable(() => import('...component path'));

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

export default App;
  • 动态路由的形式如下 👇
import React from 'react';
import { BrowserRouter, Routes, useRoutes } from 'react-router-dom';
import loadable from '@loadable/component';
// 假设动态
const menuList = [
	{
		path: '/index',
		name: '首页',
		elementPath: 'index',
	},
	{
		path: '/user',
		name: '用户管理',
		elementPath: '/user/index',
		children: [
			{
				path: '',
				name: '用户列表',
				elementPath: 'user/list',
			},
			{
				path: '/user/add',
				name: '添加用户',
				elementPath: 'user/add',
			},
		],
	},
];

function bindRouter(list) {
	let arr = [];
	list.map((item) => {
		const ComponentNode = loadable(() => import(`@/pages/${item.elementPath}`));
		if (item.children && item.children.length > 0) {
			arr.push({
				path: item.path,
				element: <ComponentNode />,
				children: [...bindRouter(item.children)],
			});
		} else {
			arr.push({
				path: item.path,
				element: <ComponentNode />,
			});
		}
	});
	return arr;
}

function App() {
	const route = bindRouter(menuList);
	const GetRoute = useRoutes(route);
	return (
		<div>
			<BrowserRouter>
				<Routes>
					<GetRoute />
				</Routes>
			</BrowserRouter>
		</div>
	);
}
export default App;

到这里相信你也已经了解了，React Router的使用方式了，是不是很简单呢，接下来就可以开始你的业务代码了，如果本文对你有帮助，还请不要吝啬你的 👍。

如有不正，欢迎大家指正，本文完~

热爱sunny
关注
  • 22
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
react-router-dom v6.0新特性及路由守卫
Bejpse的博客
02-21 2755
一、概述 v6相比v5,做了很多的优化。包括书写上更加的便捷，更加体现组件化思想。以往在处理路由嵌套和鉴权方面，v5的写法都靠各自开发人员去实现相对比较参差不齐。一下针对v6的配置做简单的介绍。 二、useRoutes v6中路由的设置采用hook的方式，有点像vue的router的实例化。 import {useRoutes} from "react-router-dom"; import { Suspense, lazy } from 'react' const routes = [ { p
react-router:react-router 中文文档
04-29
React Router Declarative routing for 文档 Packages 这个存储库是我们使用管理的monorepo。 这意味着我们实际上从相同的代码库发布了几个包到npm，包括: Package Version Docs Description React Router的核心 react-router-dom React路由器的DOM绑定 react-router-native 用于React路由器的React Native绑定 react-router-redux Integration with React Router and Redux react-router-config 静态路由配置助手 About react--router的开发由React Training和许多的贡献者完成。 如果您有兴趣了解更多关于React能为您的公司做什么的事情，请联
React router路由v6详解
好川的博客
10-16 5168
React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载
React 之 Router - 路由详解
玄鱼殇
08-18 3128
1. 安装react-router。3. 跳转Link && 占位组件。四、Not Found页面配置。hook只能在函数式组件中使用。配置放到一个地方进行集中管理。1. 创建router文件夹。2. 在App.jsx中使用。1. index.js中配置。一、Router的基本使用。一、Router的基本使用。2. search传递参数。三、Navigate导航。路由高阶组件再进一步封装。2. router中配置。路由高阶组件进一步封装。1. 动态路由的方式。
React-Router V6 使用详解
zjjcchina的博客
12-14 6626
一、基本用法 React-Router的安装方法： npm： $ npm install react-router-dom@6 yarn$ yarn add react-router-dom@6 目前官方从5开始已经放弃原有的react-router库，统一命名为react-router-dom 复制代码 使用方法 React-Router本身在React开发中就是一个组件，因此在使用时基本遵循组件开发相关原则。这里采用create-react-app来创建一个基础的demo工程演示使用过程
React 之 react-router-dom
subsistent的博客
08-19 3323
前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。
「React进阶」react-router v6 通关指南
奇舞周刊
02-28 2938
一 前言 不知不觉 react-router 已经到了 v6 版本了，可能很多同学发现，v6相比之前的 v5 有着翻天覆地的变化，因为最近接触到了 React 的新项目，用到了 v6 版本...
react-router-dom v6
pauline_的博客
12-24 2680
2021.11.4 突然更新v6版本 写demo的时候措不及防 嵌套的组件名字不要纠结!虽然我也觉得login嵌套在Layout里面很奇怪 , 但是不妨碍理解! 官网链接:React Router | Upgrading from v5https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory import { BrowserRouter, Route, Routes, Navigate .
react-router-dom v6 版本使用内容详解
刻痕
02-16 9742
react-router-dom v6 版本使用内容详解 1.路由组件 (1-1) v6 方式一 react-router-dom 常规 (1-2) v6 方式二 react-router-dom 使用 useRoutes 2.页面跳转 (2-1) Link 组件跳转 (2-2) useNavigate hooks跳转，代替useHistory 3.获取路由的参数 (3-1) useParams 获取动态路由的值 (3-2) useSearchParams 获取查询字符串的值
React RouterV6
x1037490413的博客
04-04 2465
文章目录1.Router(V6)简介2.对比V53.用法详解3.1一级路由和多级路由3.2指定默认路由3.3路由重定向3.4 4043.5代码3.6路由嵌套（maizuo.com为例）4.声明式导航和编程式导航4.1声明式导航4.2编程式导航4.21query(URL Search传参 /detail?id=1000)4.22路由传参 (/detail/1000) 动态路由5.路由拦截6.路由模式7.withRouter/类组件跳转方法 1.Router(V6)简介 2.对比V5 3.用法详解 3.1
React router（v6）
m0_54476873的博客
11-20 2405
react router v6 详解，改变，用法，动态路由，默认路由，路由传参，react router hooks，嵌套路由，demo
koa-react-router：用于koa 2的react-router中间件
02-03
koaReact路由器 koa 2中间件，用于React服务器端渲染和使用。 寻找对React Router 3的支持，请参阅文档。 尝试React Router 5，尽管它很棒！ 用法 要安装koa-react-router ： npm install koa-react-router react react-dom react-router --save 注意： react react-dom和react-router都是koa-react-router peerDependencies 。 可以将koa-react-router轻松安装在koa 2应用程序中，如下所示： // index.js import Koa from 'koa' ; import reactrouter from 'koa-react-router' ; import App from './App' ; import Container from './containers/PageContainer' ; const app = new Koa ( ) ; app
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
缓存路由 英文| 使用缓存为Vue中的keep-alive类的react-router 。 如果只想要<KeepAlive> ，请尝试 React v15 + React-Router v4 + 问题 使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互 原因与解决方案 Route不匹配时，组件将被卸载 阅读源代码之后Route ，我们发现使用children撑起一个功能，可以帮助控制呈现行为。 隐藏而不是删除将解决此问题。 安装 npm install react-router-cache-route --save # or yarn add react-router-cache-route 用法 用CacheRoute替换Route 用CacheSwitch替换Switch （因为Switch仅保留第一个匹配的状态路由，并卸载其他匹配状态的路由） impor
SimpleRouteWithReact:这是一个简单的网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据
05-20
这是一个简单的React网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据。 入门 使用此应用之前，请检查您的PC是否具有reactJs工作环境。 打开Git Bash。 将当前工作目录更改为要克隆目录的位置。 使用以下命令进行克隆：git clone 在运行应用程序之前，请安装react-router-dom和axios npm install react-router-dom npm安装axios 可用脚本 在项目目录中，可以运行： yarn start或npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。
react-router-dom 嵌套路由的实现
11-20
入口文件index.js： import React from "react" import ReactDOM from "react-dom" import App from "./App.jsx" import "babel-polyfill" const root = document.getElementById("app") if (root !== null) { ReactDOM.render(, document.getElementById("app")) } 各个文件的详细位置： 主要目录App.jsx: import React, { Fragme
React18+TS+NestJS+GraphQL 全栈开发在线教育平台
juan9872的博客
04-23 538
React18、TypeScript、NestJS和GraphQL的完美结合为在线教育平台的全栈开发提供了无懈可击的支持。通过这种技术组合，我们可以快速构建出高效、稳定、可维护和可扩展的在线教育平台，满足用户不断增长的需求。本文将介绍React18、TypeScript、NestJS和GraphQL这四种技术的完美结合，为在线教育平台的全栈开发提供强大的支持。通过不断的实践和应用，我们可以不断优化技术组合，提高系统的性能和稳定性，为用户提供更加优质的教育服务。
在React函数组件中使用错误边界和errorElement进行错误处理
最新发布
笔记、经验、日常分享
04-24 460
ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。如果需要为嵌套的组件树提供错误边界,你仍然需要使用。组件树中发生错误,React 会自动卸载组件树,并替换为传递给。是一种更通用的错误处理方式,可用于任何组件及其子组件树。在 React 18 中,你可以在根组件上使用。
react之渲染与props
weixin_73918953的博客
04-23 1090
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。你可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。你可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。你不能改变 props。当你需要交互性时，你可以设置 state。
react 最新版本 匹配的 react-dom react-router-dom 版本
06-03
React的最新版本是18.0.0，它与react-dom和react-router-dom的最新版本兼容。目前，React DOM的最新版本是18.0.0，React Router DOM的最新版本是6.2.1。建议在使用React 18时，使用最新版本的react-dom和react-router-dom，可以在项目中的package.json文件中声明依赖，如下所示： ``` "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", "react-router-dom": "^6.2.1" } ``` 注意，使用^符号表示安装相应主版本号下的最新次版本号，如上面的声明会安装最新的18.x.x版本，其中x表示最新的次版本号。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值