React学习教程，从入门到精通，React Router 语法知识点及使用手段详解(28）

React Router 语法知识点及使用方法详解

---

当前环境说明

本文基于 React Router v5 编写（因你提供的知识点如 withRouter、Switch、Prompt 等属于 v5 特性）。
若使用 React Router v6，部分 API 已废弃或重构（如 Switch → Routes, withRouter → hooks, Prompt → unstable_usePrompt 等）。

---

一、React Router 基础路由配置

✅ 1. 安装 React Router

npm install react-router-dom@5

---

✅ 2. 简单示例：网站列表（基础路由）

功能说明：

• 首页 / 显示网站列表
• 点击跳转到对应网站详情 /site/:id
• 使用 BrowserRouter, Route, Link, Switch

代码示例：

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
// 模拟数据
const sites = [
{ id: 1, name: 'Google', url: 'https://google.com' },
{ id: 2, name: 'GitHub', url: 'https://github.com' },
{ id: 3, name: 'React', url: 'https://reactjs.org' },
];
// 首页组件：显示网站列表
function Home() {
return (网站列表
{sites.map(site => (
{/* 使用 Link 进行客户端导航，不刷新页面 */}
{site.name}
))}
);
}
// 详情页组件：根据 URL 参数显示网站信息
function SiteDetail({ match }) {
// match.params.id 获取动态路由参数
const site = sites.find(s => s.id === parseInt(match.params.id));
if (!site) return 网站不存在;
return ({site.name} 详情页
网址：{site.url}
⬅ 返回首页
);
}
// 主应用组件
function App() {
return (React Router 网站导航系统
{/* Switch 确保只匹配第一个符合条件的路由 */}
{/* 精确匹配首页 */}
{/* 动态路由匹配详情页 */}
{/* 404 页面 */}
⛔ 页面未找到
返回首页
);
}
export default App;

---

二、路由组件的属性（props）

当组件通过 Route 渲染时，会自动注入以下 props：

• history：用于编程式导航（如 history.push()）
• location：当前 URL 信息（如 pathname, search, state）
• match：匹配信息（如 params, path, url）

示例：打印路由属性

function DebugRoute({ history, location, match }) {
return (路由调试信息{JSON.stringify({ history: 'object', location, match }, null, 2)}

); } // 在路由中使用

---

三、Switch 组件

Switch 只渲染第一个匹配的 Route 或 Redirect，避免多个路由同时激活。

示例：不使用 Switch 的问题

{/* ❌ 不使用 Switch —— 可能多个组件同时渲染 */}
{/* 当访问 /about 时，两个都会匹配（因为 / 包含在 /about 中）*/}

✅ 正确用法：

{/* 默认 fallback */}

---

四、路由匹配 matchPath()

用于在组件外或逻辑中手动匹配路径（如在 Redux 中判断当前路由）。

语法：

import { matchPath
} from 'react-router-dom';
const match = matchPath("/users/123", {
path: "/users/:id",
exact: true,
strict: false
});

示例：在组件外判断路由

import { matchPath } from 'react-router-dom';
function App() {
const currentPath = window.location.pathname;
const userMatch = matchPath(currentPath, {
path: "/user/:id",
exact: true
});
if (userMatch) {
console.log("当前是用户页，ID：", userMatch.params.id);
}
return (
{/* ... */}
);
}

---

五、静态路由 vs 动态路由

✅ 静态路由

路径固定，无参数。

✅ 动态路由

路径含参数，如 :id, :name。

示例：动态路由 + 参数获取

function UserProfile({ match }) {
const { id } = match.params;
return 用户ID：{id};
}
// 支持多个参数
function BlogPost({ match }) {
const { year, month, slug } = match.params;
return (
文章：{slug}
发布于 {year} 年 {month} 月
);
}

---

六、各种路由器（Routers）

✅ 1. BrowserRouter（最常用）

使用 HTML5 History API（pushState, replaceState），URL 看起来干净：http://example.com/about

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

✅ 2. HashRouter

使用 URL hash（#），兼容老浏览器，URL 如：http://example.com/#/about

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

✅ 3. MemoryRouter

用于测试或非浏览器环境（如 React Native 之外的场景），URL 不反映在地址栏。

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

✅ 4. NativeRouter（React Native 专用）

用于 React Native 应用，不在 Web 环境使用。

// 仅在 React Native 中
import { NativeRouter } from 'react-router-native';

✅ 5. StaticRouter（服务端渲染 SSR）

用于 Node.js 服务端渲染，需传入 location 和 context。

// server.js (Express 示例)
import { StaticRouter } from 'react-router-dom';
app.get('*', (req, res) => {
const context = {};
const markup = ReactDOMServer.renderToString(
);
if (context.url) {
res.redirect(301, context.url);
} else {
res.send(`
${markup}
`);
}
});

---

七、React Router 特性组件

✅ 1. Prompt 组件 —— 离开页面确认

在用户离开当前页面前弹出确认框（如表单未保存）。

import { Prompt } from 'react-router-dom';
function ContactForm() {
const [isBlocking, setIsBlocking] = useState(false);
return (
{/* 当 isBlocking 为 true 时，离开页面会弹出提示 */}setIsBlocking(e.target.value.length > 0)}
placeholder="输入内容..."
/>
);
}

⚠️ 注意：现代浏览器对 Prompt 限制较多，部分浏览器可能忽略自定义消息。

---

✅ 2. withRouter 高阶组件（HOC）

将 history, location, match 注入到非路由组件中。

import { withRouter } from 'react-router-dom';
function BackButton({ history }) {
return (
);
}
// 包装后即可获得路由属性
export default withRouter(BackButton);

在类组件中使用：

class UserProfile extends React.Component {
handleEdit = () => {
this.props.history.push(`/user/${this.props.match.params.id}/edit`);
};
render() {
return (
用户页
);
}
}
export default withRouter(UserProfile);

v6 替代方案：使用 useNavigate, useLocation, useParams hooks。

---

✅ 3. Redirect 组件 —— 重定向

用于登录跳转、页面迁移、权限控制等。

基本用法：

带状态跳转：

条件重定向示例：

function PrivateRoute({ component: Component, isAuthenticated, ...rest }) {
return (
isAuthenticated ? (
) : (
)
}
/>
);
}
// 使用

---

八、综合性案例：带权限控制的后台管理系统

// App.js - 综合案例
import React, { useState } from 'react';
import {
BrowserRouter as Router,
Route,
Link,
Switch,
Redirect,
Prompt,
withRouter
} from 'react-router-dom';
// 模拟登录状态
const fakeAuth = {
isAuthenticated: false,
authenticate(cb) {
fakeAuth.isAuthenticated = true;
setTimeout(cb, 100); // 模拟异步
},
signout(cb) {
fakeAuth.isAuthenticated = false;
setTimeout(cb, 100);
}
};
// 登录页
function Login({ history }) {
const [redirectToReferrer, setRedirectToReferrer] = useState(false);
const login = () => {
fakeAuth.authenticate(() => {
setRedirectToReferrer(true);
});
};
if (redirectToReferrer) {
return ;
}
return (登录
);
}
// 仪表盘（需登录）
function Dashboard() {
const [formChanged, setFormChanged] = useState(false);
return (仪表盘
模拟表单：setFormChanged(true)} />
);
}
// 设置页
function Settings() {
return ⚙️ 设置页面;
}
// 导航栏（使用 withRouter 获取 history）
const Navigation = withRouter(({ history, location }) => (
仪表盘
设置
{fakeAuth.isAuthenticated ? (
) : (
登录
)}当前路径：{location.pathname}
));
// 私有路由组件
function PrivateRoute({ component: Component, ...rest }) {
return (
fakeAuth.isAuthenticated ? (
) : (
)
}
/>
);
}
// 主应用
function App() {
return (后台管理系统欢迎！请登录进入系统} />⛔ 404 页面不存在} />
);
}
export default App;

---

九、本章小结

知识点	作用说明
BrowserRouter	使用 HTML5 History API，推荐用于现代 Web 应用
Route	定义路径与组件映射关系
Link	声明式导航，替代 <a> 标签
Switch	只渲染第一个匹配路由，避免冲突
match.params	获取动态路由参数（如 /user/:id）
Redirect	重定向到其他路由，常用于登录跳转
Prompt	离开页面前确认，防止数据丢失
withRouter	非路由组件获取路由属性（v5），v6 用 hooks 替代
matchPath	手动匹配路径，适用于逻辑判断
HashRouter	兼容老浏览器，URL 含 #
StaticRouter	服务端渲染专用

---

升级建议（React Router v6）

若你计划使用 v6，请注意：

• Switch → Routes
• Route component → Route element={<Component />}
• withRouter → useNavigate(), useLocation(), useParams()
• Prompt → unstable_usePrompt（实验性）或自定义逻辑
• exact 属性默认启用

---

✅ 以上内容涵盖 React Router v5 核心知识点 + 详细案例 + 综合实战，可直接用于项目开发或学习参考。