当前位置：首页 > news >正文

React 路由（React Router）：在 React 应用中管理路由

news 2025/7/7 15:09:19

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

文章目录

React Router 是一个用于在 React 应用程序中处理路由的库，它允许你为不同的 URL 路径渲染不同的组件。以下是 React Router 的一些关键概念和用法：

核心概念

路由器（Routers）：
- BrowserRouter：使用 HTML5 的历史 API 来保持 UI 和 URL 的同步。
- HashRouter：使用 URL 的哈希部分来保持 UI 和 URL 的同步，适用于不支持 HTML5 历史API的环境。
路由（Routes）：
- Route：最基本的路由组件，它负责根据路径匹配并渲染对应的组件。
- Switch：渲染第一个与当前路径匹配的 <Route> 或 <Redirect>。
导航（Navigation）：
- Link：用于在应用程序内部创建链接，允许用户在不同页面间导航。
- NavLink：一个特殊版本的 <Link>，它会在匹配当前路径时为其添加样式属性。
- Redirect：用于重定向，将用户重定向到另一个路由。

基础用法

安装 React Router：

npm install react-router-dom

设置路由器：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => (<Router><Switch><Route exact path="/" component={Home} /><Route path="/about" component={About} /><Route path="/contact" component={Contact} />// ...其他路由</Switch></Router>
);

使用 Link 组件进行导航：

import { Link } from 'react-router-dom';
const Navbar = () => (<nav><ul><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/contact">Contact</Link></li></ul></nav>
);

定义组件：

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;
const Contact = () => <div>Contact Page</div>;

动态路由

动态路由允许你在 URL 中包含可变的部分，通常用于匹配特定的资源，如用户ID。

<Route path="/user/:userId" component={User} />

在 User 组件中，你可以通过 useParams 钩子获取 userId：

import { useParams } from 'react-router-dom';
const User = () => {const { userId } = useParams();return <div>User ID: {userId}</div>;
};

嵌套路由

在 React Router 中，你可以通过在父路由组件内部放置更多 <Route> 来创建嵌套路由。

const App = () => (<Router><Switch><Route path="/users" component={Users} />// ...其他路由</Switch></Router>
);
const Users = () => (<div><h1>Users</h1><Route path="/users/:userId" component={User} /></div>
);