react hooks获取url参数

在 React 中使用 Hooks 来获取 URL 参数可以通过使用 React Router 库来实现。React Router 是一个流行的用于处理路由的库，它允许你在应用中管理不同的页面和路由。

以下是如何使用 React Router 和 Hooks 来获取 URL 参数的示例：

首先，确保你已经安装了 React Router。你可以使用以下命令来安装：

npm install react-router-dom

在你的组件中，导入需要的模块：

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

在组件中使用 useParams Hook 来获取 URL 参数。假设你的 URL 是 /users/:userId，你想要获取 userId 参数。在组件中可以这样做：

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

function UserProfile() {
  const { userId } = useParams();

  return (
    <div>
      <h2>User Profile</h2>
      <p>User ID: {userId}</p>
    </div>
  );
}

export default UserProfile;

在上面的示例中，useParams Hook 会返回一个包含 URL 参数的对象，你可以根据参数名称来访问相应的值。

在你的应用中设置路由，确保参数的名称和路由中的占位符名称一致。例如：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/users/:userId">
          <UserProfile />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

在这个示例中，当你访问像 /users/123 这样的 URL 时，UserProfile 组件将会渲染，并且你可以通过 useParams 获取到 userId 参数的值。

请注意，上述示例是一个基本的用法示例。根据你的应用场景，可能需要更复杂的路由配置和组件结构。此外，你也可以使用其他的路由库或自定义解决方案来实现类似的功能。