使用 React Router时，如何获取当前页面的路由或浏览器中地址栏中的地址？

在React Router中，你可以使用useLocation hook 来获取当前页面的路由或浏览器中地址栏中的地址。useLocation会返回一个location对象，这个对象包含了当前URL的信息，包括pathname（路径名）、search（查询参数）和hash（哈希值）。

以下是如何使用useLocation来获取当前路由的示例：

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

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

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

在这个例子中，location.pathname会返回当前页面的路径名，location.search会返回查询参数（以问号?开始的部分），location.hash会返回哈希值（以井号#开始的部分）。

请注意，useLocation hook 只有在路由更改时才会重新渲染组件。如果你需要在路由更改时执行某些操作，可以使用useEffect hook 监听location的变化：

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

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

  useEffect(() => {
    // 当路由更改时，这个函数会被调用
    console.log('路由已更改:', location.pathname);
  }, [location]); // 当location更改时，useEffect会重新运行

  return (
    <div>
      <p>当前路径: {location.pathname}</p>
    </div>
  );
}

在这个例子中，当路由更改时，控制台会输出新的路径名。