在上一节中，我们详细探讨了“嵌套路由”的实现，这为我们建立复杂的应用结构奠定了基础。在本篇中，我们将深入研究“路由参数”和“导航”的内容，帮助我们更灵活地处理应用中的动态路由。
一、路由参数概述
在现代前端应用中，动态数据的展示是常见的需求。React Router 支持在路由中使用参数，以便我们能够根据不同的输入渲染不同的内容。例如，在一个商品详情页中，我们可以使用路由参数来获取特定商品的 ID。
1. 定义包含参数的路由
当我们定义路由的时候，可以使用冒号 : 来标识路由参数。例如：
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProductDetail from './ProductDetail';
const App = () => {
return (
<Router>
<Switch>
<Route path="/product/:id" component={ProductDetail} />
{/* 其他路由 */}
</Switch>
</Router>
);
};
|
在上面的代码中，/product/:id 表示 id 是一个可变的参数，指向特定商品的详情页。
2. 获取路由参数
使用 useParams 钩子，我们可以轻松地获取 URL 中的参数。以下是 ProductDetail 组件的实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { useParams } from 'react-router-dom';
const ProductDetail = () => {
const { id } = useParams<{ id: string }>();
return (
<div>
<h1>商品详情</h1>
<p>商品 ID: {id}</p>
{/* 这里可以通过 ID 请求数据并展示商品信息 */}
</div>
);
};
|
在这个组件中，我们使用 useParams 获取了 id 参数，并在页面中展示。
二、导航功能
除了使用路由参数外，我们还需要实现用户在不同路由之间的导航。这通常通过链接或按钮组件来实现。
1. 使用 Link 组件进行导航
react-router-dom 提供了 Link 组件，方便我们实现 SPA （单页面应用）中的导航。例如，我们可以创建一组商品链接：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| import { Link } from 'react-router-dom';
const ProductList = () => {
const products = [
{ id: 1, name: '商品1' },
{ id: 2, name: '商品2' },
{ id: 3, name: '商品3' },
];
return (
<div>
<h1>商品列表</h1>
<ul>
{products.map(product => (
<li key={product.id}>
<Link to={`/product/${product.id}`}>{product.name}</Link>
</li>
))}
</ul>
</div>
);
};
|
在上面的代码中，我们为每个商品创建了一个链接。点击链接后，应用将导航到相应的商品详情页面。
2. 使用 useNavigate 进行编程式导航
有时我们需要在事件处理函数中执行导航操作，这时可以使用 useNavigate 钩子。比如，使用按钮进行导航：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { useNavigate } from 'react-router-dom';
const ProductDetail = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const handleBack = () => {
navigate('/products');
};
return (
<div>
<h1>商品详情</h1>
<p>商品 ID: {id}</p>
<button onClick={handleBack}>返回商品列表</button>
</div>
);
};
|
在这个例子中，通过调用 navigate 方法来实现导航到商品列表。
三、案例总结
在本节中，我们学习了如何使用路由参数和实现导航。通过灵活运用 useParams、Link 和 useNavigate，我们建立了一个简单的商品展示系统。以下是一个简单的应用逻辑概览：
- 商品列表中使用
Link 组件导航至商品详情页。
- 商品详情页通过
useParams 获取并展示动态数据。
- 提供按钮以编程方式返回商品列表，提高用户体验。
这一系列的操作将为接下来的 Hooks 介绍打下良好的基础，我们将借此深入研究如何使用功能性编程来管理状态和副作用。
在下一篇中，我们会讲解 React Hooks 的基本概念，以及如何在组件中更好地管理状态。在实际应用中，它们将极大地简化我们的代码结构，提高可读性与复用性。