1. 简介
React Router 是 React 的一个标准库，用于处理前端路由。它使得在单页应用程序中实现路由变得更加简单和直观。通过 React Router，你可以为不同的 URL 显示不同的组件。
2. 安装
首先，你需要安装 React Router。通过 npm 来安装：
1
| npm install react-router-dom
|
3. 基本概念
React Router 主要由以下几个核心部分组成：
BrowserRouter：使用 HTML5 的 history API 来保持 UI 与 URL 同步。Routes：定义路由的容器，Route 是其中的一个子组件。Route：定义你的路由规则，将路径映射到组件。Link：用于创建导航链接，实现页面切换。
4. 创建一个简单的 Router 示例
下面是一个基本的 React Router 使用示例。
4.1 创建项目
你可以使用 Create React App 创建一个新的 React 项目：
1
2
| npx create-react-app my-app
cd my-app
|
4.2 结构
在 src 目录下创建一个 components 目录，然后创建三个简单的组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
import React from 'react';
const Home = () => {
return <h2>Home Page</h2>;
};
export default Home;
import React from 'react';
const About = () => {
return <h2>About Page</h2>;
};
export default About;
import React from 'react';
const NotFound = () => {
return <h2>404 Not Found</h2>;
};
export default NotFound;
|
4.3 添加 Router
在 src/index.js 中设置路由：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import App from './App';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} />
</Routes>
</Router>
);
|
4.4 创建一个导航
在 src/App.js 中添加导航链接：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| import React from 'react';
import { Link } from 'react-router-dom';
function App() {
return (
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<hr />
{/* 这里会根据路由展示对应的组件 */}
</div>
);
}
export default App;
|
5. 使用 Link 组件
通过 Link 组件，你可以创建导航链接，用户点击链接时会改变 URL 但不会刷新页面。例如，在上述 App 组件中，我们使用了两个 Link 组件来导航到不同的路由。
6. 路由中的参数
React Router 还支持路由参数。假设你想要在 About 页面中显示更多信息，比如用户 ID。
6.1 修改路由
1
| <Route path="/about/:id" element={<About />} />
|
6.2 获取路由参数
在 About 组件中使用 useParams 获取参数：
1
2
3
4
5
6
7
| import React from 'react';
import { useParams } from 'react-router-dom';
const About = () => {
let { id } = useParams();
return <h2>About Page for user {id}</h2>;
};
|
通过这种方式，你可以在URL中传递动态参数。
7. 总结
React Router 是管理 React 应用路由的重要工具。通过理解 BrowserRouter、Routes 和 Route 组件，你可以创建强大而灵活的导航结构。此外，使用 Link 组件可以方便地实现页面间的导航。
关于更复杂的路由情况，比如嵌套路由、重定向等，可以进一步深入学习 React Router 的文档。
