在 React 中获取当前 URL

1. 在 React 中获取当前 URL - Vanilla JavaScript 解决方案
2. 通过 React Router 获取当前 URL
3. 获取当前 URL React Router Hooks

在 React 中开发单页应用程序时，路由是难题的关键部分。在每个 URL 上，可能有需要显示的组件或其他视觉效果。

在构建 React 应用程序时，开发人员通常需要根据当前 URL 执行各种操作。开发者可以使用多个不同的接口来访问当前的 URL。

在 React 中获取当前 URL - Vanilla JavaScript 解决方案

由于 React 基于常规 JavaScript，你可以访问 window 界面上的 location 属性。要获取当前 URL 的完整路径，你可以使用 window.location.href，而要获取没有根域的路径，请访问 window.location.pathname。

让我们看一下这个例子：

class App extends Component {
  render() {
    console.log(window.location.href);
    return <h1>Hi! Try edit me</h1>;
  }
}

如果你在 playcode.io 上呈现 App 组件，控制台将显示你项目的完整 URL。在这种情况下，这将是 https://playcode.io/837468/。如果你改为 console.log(window.location.pathname)，控制台输出将是 /837468/。按照这个 link 自己试一下代码。

读取 window.location 是获取当前 URL 的一个很好的简单解决方案。但是，它依赖于一般的 window.location 接口。

如果你正在寻找特定于 React 的解决方案，请继续阅读。

通过 React Router 获取当前 URL

React 提供 history-package，并通过 props 分隔 location 对象。它本质上与 window 界面上可用的 location 对象相同，但它是为 React 定制的。

此对象表示应用程序的当前 URL。访问它的最简单方法是读取 props 的 location 对象。

但是，要通过 props 提供 location，你必须安装 React Router，并且子组件必须连接到 Route 组件。例如：

<Route path="/" component={App}></Route>

在这个例子中，App 组件将可以通过 props 访问 location 对象。在这个组件中，我们可以读取 this.props.location.pathname，它将返回一个不包含根域的路径 URL。

使用 <Route> 组件呈现的子组件也可以访问 location 属性。下面是一个例子：

<Route path="/" render={() => <App></App>} />

在这种情况下，App 组件仍将保留对 location props 的访问权限。

如果 this.props.location 返回 undefined，则你的 React 组件很可能在自定义 <Route> 组件之外呈现。在这种情况下，你可以导入高阶组件 (HOC)withRouter 并使用它来访问 location 和 history props。

withRouter 可以从 react-router-dom 包中导入。下面是一个例子：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
      render(){...}
}

export default withRouter(App)

将默认导出 App 组件包装在 withRouter HOC 中将允许你访问 props，否则这些组件仅可用于使用特殊 <Route> 组件呈现的组件。

获取当前 URL React Router Hooks

功能组件允许你使用钩子。在我们的情况下，useLocation() 是一个很好的钩子，它提供了一种访问 location 对象的简单方法。

它可以从 react-router-dom 包中导入。此示例使用 useLocation() 挂钩获取 location 对象并将其存储在变量中。

我们来看一下：

import { useLocation } from "react-router-dom"
const sampleLocation = useLocation();

将 location 对象存储在变量中后，你可以通过访问 sampleLocation.pathname 来访问路径（没有根域的 URL）。

你还可以访问 history 对象的 location 属性。

useHistory 挂钩允许你访问它。然而，由于可变性问题，官方 react-router 文档 建议坚持使用 location 对象。