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

React Router 是一个非常强大的库，允许开发者在 React 应用中处理路由和导航。它提供了丰富的功能来管理 URL 和组件之间的关系。在开发应用时，常常需要在组件中获取当前页面的路由信息或浏览器地址栏中的地址。本文将详细介绍如何在使用 React Router 时获取这些信息，包括不同版本的 React Router 中的实现方式。

1. 理解 React Router 的基本概念

在深入之前，首先要理解 React Router 的基本概念。React Router 允许开发者定义一组路由，每个路由对应一个组件，它们根据当前的 URL 显示相应的组件。React Router 的核心组件包括：

• BrowserRouter：使用 HTML5 的 history API，提供对 URL 的支持。
• Route：定义路由规则。
• Link：用于在应用中进行导航。
• Switch：用于渲染第一个匹配的 Route。

2. 获取当前路由信息的基本方法

在 React Router 中，获取当前路由信息主要有以下几种方式：

2.1. 使用 useLocation Hook（React Router v5.1 及以上）

在 React Router v5.1 及以上版本中，可以使用 useLocation Hook 来获取当前的路由信息。useLocation 返回一个 location 对象，包含有关当前 URL 的信息。

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

const CurrentLocation = () => {
    const location = useLocation();

    return (
        <div>
            <h2>当前的路径: {location.pathname}</h2>
            <h3>查询字符串: {location.search}</h3>
            <h3>哈希: {location.hash}</h3>
        </div>
    );
};

export default CurrentLocation;

在这个例子中，location 对象包含了当前路径、查询字符串和哈希值。

2.2. 使用 withRouter 高阶组件（React Router v5）

在较早的版本（如 v4 和 v5）中，可以使用 withRouter 高阶组件来访问路由信息。withRouter 会将路由相关的 props（包括 location、match 和 history）注入到组件中。

im