React 中动态生成路径并传递 Params 参数的实现方法

1. 概述

在 React Router 中，可以通过 表达式 动态生成路径并传递参数。这种方式非常适合需要根据用户输入、状态或其他动态数据生成路由的场景。

---

2. 核心概念

• 动态路径：使用模板字符串（ ` ）和变量动态生成路径。
• 传递参数：通过 Link 组件的 to 属性或 navigate 函数传递参数。
• 接收参数：在目标组件中使用 useParams Hook 获取参数。

---

3. 实现步骤

3.1 安装依赖

确保已安装 react-router-dom：

npm install react-router-dom

3.2 定义动态路由

在路由配置中，使用 :paramName 定义动态参数。

3.3 动态生成路径

通过模板字符串和变量动态生成路径。

3.4 接收参数

在目标组件中使用 useParams 获取参数。

---

4. 完整代码示例

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Routes, Link, useParams } from 'react-router-dom';

// 首页组件
function Home() {
  return <h1>Home Page</h1>;
}

// 用户详情组件（接收 params）
function User() {
  const { userId } = useParams();
  return (
    <div>
      <h1>User ID: {userId}</h1>
      <Link to="/">Back to Home</Link>
    </div>
  );
}

// 主应用组件
function App() {
  // 使用状态存储动态 userId
  const [userId, setUserId] = useState('');

  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> |{' '}
        {/* 动态生成路径 */}
        <Link to={`/user/${userId}`}>Go to User</Link>
      </nav>
      <div>
        <input
          type="text"
          placeholder="Enter User ID"
          value={userId}
          onChange={(e) => setUserId(e.target.value)}
        />
      </div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/:userId" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

---

5. 代码说明

5.1 动态生成路径

<Link to={`/user/${userId}`}>Go to User</Link>

• 使用模板字符串动态生成 to 属性值。
• userId 是一个状态变量，用户可以通过输入框设置它的值。

5.2 输入框

<input
  type="text"
  placeholder="Enter User ID"
  value={userId}
  onChange={(e) => setUserId(e.target.value)}
/>

• 用户输入的值会更新 userId 状态。

5.3 接收参数

const { userId } = useParams();

• 在 User 组件中，使用 useParams 获取 userId 参数。

---

6. 运行效果

1. 打开应用后，显示首页（Home Page）。
2. 在输入框中输入用户 ID（例如 789）。
3. 点击 Go to User，跳转到用户详情页，显示对应的 userId。
4. 点击 Back to Home 返回首页。

---

7. 总结

• 通过 模板字符串 和 状态变量，可以动态生成路径并传递参数。
• 使用 useParams 在目标组件中接收参数。
• 这种方式非常适合需要根据用户输入或其他动态数据生成路径的场景。

---

8. 扩展

• 如果需要传递多个参数，可以使用类似的方式：

  <Link to={`/user/${userId}/post/${postId}`}>Go to Post</Link>

• 在目标组件中，使用 useParams 获取多个参数：

  const { userId, postId } = useParams();

通过以上方法，你可以灵活地实现动态路由和参数传递！