使用 useParams - Javascript

使用 useParams 是 React Router 提供的一种方法，用于在 URL 中解析参数并将它们作为 props 传递给组件。它可以让我们在页面之间传递数据，或者根据已知的参数渲染不同的组件。

语法

import { useParams } from "react-router-dom";

function MyComponent() {
  const { param1, param2, param3 } = useParams();
  // do something with the parameters
}

在组件中，我们可以使用 useParams 钩子来解析 URL 参数。这个钩子会返回一个对象，其中包含 URL 中所有的参数。我们可以使用解构赋值将它们分配给变量名。

例如，如果我们有一个 URL "/users/:userId"，其中 ":userId" 是一个动态参数，我们可以在组件中使用以下代码来获取它：

function User() {
  const { userId } = useParams();
  return <h1>User {userId}</h1>;
}

这将返回 "/users/42" 的页面，显示 "User 42"。

Demo

下面是一个使用 useParams 的示例。这个 demo 显示了一个用户列表，点击每个用户将导航到其个人资料页面。

1. 创建路由

首先，我们需要创建两个路由：一个用于列表视图，一个用于个人资料视图。

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import UserList from "./UserList";
import UserProfile from "./UserProfile";

function App() {
  return (
    <Router>
      <ul>
        <li><Link to="/users">Users</Link></li>
      </ul>
      <Switch>
        <Route exact path="/users">
          <UserList />
        </Route>
        <Route path="/users/:userId">
          <UserProfile />
        </Route>
      </Switch>
    </Router>
  );
}

2. 创建用户列表

下一步是创建用户列表组件。这里我们只需要一个简单的数组来存储用户数据，并使用 Link 组件来将每个用户的 ID 作为 URL 参数传递给 UserProfile 组件。

import { Link } from "react-router-dom";

const users = [
  { id: "1", name: "Alice" },
  { id: "2", name: "Bob" },
  { id: "3", name: "Charlie" },
];

function UserList() {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}><Link to={`/users/${user.id}`}>{user.name}</Link></li>
      ))}
    </ul>
  );
}

3. 创建用户资料

最后，我们创建 UserProfile 组件，用于显示特定用户的资料。这里我们使用 useParams 钩子获取 URL 中的参数，并使用它来在 users 数组中查找特定的用户。

function UserProfile() {
  const { userId } = useParams();
  const user = users.find(u => u.id === userId);
  return (
    <>
      <h1>User profile</h1>
      <p>ID: {user.id}</p>
      <p>Name: {user.name}</p>
    </>
  );
}

结论

使用 useParams 是在 React Router 中传递参数的常用方法。它可以让你轻松地将 URL 参数传递到组件中，并在网页之间传递数据。在实际开发中，你可能会遇到更复杂的场景，但是 useParams 钩子的基础用法已经足够让你入门。