动态路由参数

在 React 应用中，路由是管理页面导航的核心部分。静态路由适用于固定的页面结构，但在实际开发中，我们经常需要根据 URL 动态渲染内容。这时，动态路由参数就派上用场了。

什么是动态路由参数？

动态路由参数是 URL 中的占位符，用于捕获用户访问的特定部分。例如，在一个博客应用中，你可能希望根据文章 ID 动态加载不同的文章内容。通过动态路由参数，你可以轻松实现这一点。

基本语法

在 React Router 中，动态路由参数通过在路径中使用冒号 : 来定义。例如：

jsx
<Route path="/post/:postId" element={<Post />} />

在这个例子中，:postId 是一个动态参数，表示 postId 的值可以从 URL 中提取。

如何使用动态路由参数？

1. 定义动态路由

首先，你需要在路由配置中定义动态路由。以下是一个简单的例子：

jsx
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Post from './Post';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/post/:postId" element={<Post />} />
      </Routes>
    </Router>
  );
}

在上面的代码中，/post/:postId 是一个动态路由，:postId 是动态参数。

2. 在组件中获取参数

在目标组件中，你可以使用 React Router 提供的 useParams 钩子来获取动态参数的值。以下是如何在 Post 组件中使用它的示例：

jsx
import { useParams } from 'react-router-dom';

function Post() {
  const { postId } = useParams();

  return (
    <div>
      <h1>Post ID: {postId}</h1>
      <p>This is the content of post {postId}.</p>
    </div>
  );
}

当用户访问 /post/123 时，postId 的值将是 "123"，页面会显示：

Post ID: 123
This is the content of post 123.

实际应用场景

场景 1：博客文章详情页

假设你正在开发一个博客应用，每篇文章都有一个唯一的 ID。你可以使用动态路由参数来加载特定文章的内容。

jsx
<Route path="/blog/:articleId" element={<ArticleDetail />} />

在 ArticleDetail 组件中，你可以根据 articleId 从 API 获取文章数据并渲染页面。

场景 2：用户个人资料页

在一个社交应用中，每个用户都有一个唯一的用户名。你可以使用动态路由参数来加载用户的个人资料。

jsx
<Route path="/user/:username" element={<UserProfile />} />

在 UserProfile 组件中，你可以根据 username 获取用户信息并显示。