useLocation

`useLocation` 是 React Router 提供的一个 Hook，用于在函数组件中获取当前 URL 的 `location` 对象。`location` 对象包含了当前 URL 的信息，包括路径、查询参数、哈希等等。

在使用 `useLocation` 前，需要先在组件中导入它：

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

然后在组件中调用 `useLocation`：

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

`useLocation` 返回一个 `location` 对象，该对象包含以下属性：

- `pathname`：当前 URL 的路径部分，例如 `/home/foo`。
- `search`：当前 URL 的查询参数部分，例如 `?name=foo&age=20`。
- `hash`：当前 URL 的哈希部分，例如 `#section1`。
- `state`：在使用 `history.push` 或 `history.replace` 方法时传递的状态对象。

你可以在组件中使用 `location` 对象中的属性来获取当前 URL 的信息，例如：

function MyComponent() {
  const location = useLocation();

  return (
    <div>
      <p>当前路径：{location.pathname}</p>
      <p>查询参数：{location.search}</p>
      <p>哈希值：{location.hash}</p>
    </div>
  );
}

`useLocation` 的一个常见用途是在路由组件中根据当前 URL 的路径或查询参数展示不同的内容。例如，你可以使用 `switch` 和 `Route` 组件来根据 URL 匹配路由：

function MyRouter() {
  return (
    <Switch>
      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
    </Switch>
  );
}

在这个例子中，根据 URL 的路径，React Router 会匹配对应的路由组件并渲染它们。