18 路由管理之路由参数与导航

在上一节中，我们详细探讨了“嵌套路由”的实现，这为我们建立复杂的应用结构奠定了基础。在本篇中，我们将深入研究“路由参数”和“导航”的内容，帮助我们更灵活地处理应用中的动态路由。

一、路由参数概述

在现代前端应用中，动态数据的展示是常见的需求。React Router 支持在路由中使用参数，以便我们能够根据不同的输入渲染不同的内容。例如，在一个商品详情页中，我们可以使用路由参数来获取特定商品的 ID。

1. 定义包含参数的路由

当我们定义路由的时候，可以使用冒号 : 来标识路由参数。例如：

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 组件的实现：

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 （单页面应用）中的导航。例如，我们可以创建一组商品链接：

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 钩子。比如，使用按钮进行导航：

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 的基本概念，以及如何在组件中更好地管理状态。在实际应用中，它们将极大地简化我们的代码结构，提高可读性与复用性。