react函数组件里面获取当前路由

在 React 中，可以使用 `useLocation` hook 获取当前路由。

首先，需要在组件中引入 `useLocation`：

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

然后在组件中调用 `useLocation`，它会返回一个包含当前路由信息的对象：

function MyComponent() {
  const location = useLocation();
  // ...
}

`location` 对象包含许多属性，包括 `pathname`，它表示当前路由的路径部分。例如，如果当前路由为 `/users/123`，那么 `location.pathname` 的值将为 `/users/123`。

你也可以使用 `useHistory` hook 获取路由历史记录，或者使用 `useParams` hook 获取路由参数。这些 hook 都需要在组件中引入相应的模块。

相关问题

react函数式组件获取路由参数

在 React 中使用函数式组件获取路由参数可以通过两种方式实现。

1. 使用 React Router 提供的 `useParams` 钩子函数：

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

function MyComponent() {
  const { id } = useParams();

  // 使用 id 进行操作

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

在上述代码中，`useParams` 钩子函数返回一个对象，该对象包含了当前路由参数的键值对。在这个例子中，我们使用`{ id }`解构出了名为 `id` 的路由参数。

2. 使用 React Router 提供的 `withRouter` 高阶组件:

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

function MyComponent(props) {
  const { id } = props.match.params;

  // 使用 id 进行操作

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default withRouter(MyComponent);

在上述代码中，我们通过 `props` 对象的 `match.params` 属性获取了路由参数。`withRouter` 高阶组件将路由相关的属性注入到组件的 `props` 对象中，使得我们可以直接从 `props` 中访问路由参数。

这两种方式都可以用于函数式组件中获取路由参数，并且取决于你使用的 React Router 版本和个人喜好来选择。

react函数组件中如何拿到路由路径中传的id

要在 React 函数组件中获取路由路径中传递的 id，需要使用 React Router 提供的 `useParams` 钩子函数。首先需要在组件中引入 `useParams`：

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

然后在组件中使用 `useParams` 获取路由参数：

function MyComponent() {
  const { id } = useParams();

  // 在组件中可以使用 id 来进行相应的操作
  // ...
}

其中，`id` 对应的是路由路径中传递的参数名称，例如路由路径为 `"/users/:id"`，则可以通过 `useParams` 获取到 `id` 参数的值。