如何在React/Gatsby类组件中获取当前页面URL

你可以直接复用原有判断逻辑，根据使用场景选择对应的实现方式即可：

场景1：仅渲染时使用URL #

如果只需要在渲染阶段使用该值做三元判断等逻辑，直接在render方法内定义变量即可：

import React, { Component } from 'react';

class Header extends Component {
  render() {
    // 完全复用你原有逻辑
    const url = typeof window !== 'undefined' ? window.location.href : '';
    return (
      <div>
        {/* 示例：使用三元运算符做条件渲染 */}
        {url.includes('/admin') ? <span>管理后台</span> : <span>公共页面</span>}
      </div>
    )
  }
}

场景2：多方法复用URL #

如果组件内多个生命周期/自定义方法都需要用到这个值，可将其存入组件状态或者实例属性：

import React, { Component } from 'react';

class Header extends Component {
  constructor(props) {
    super(props);
    // 方式1：存入state，值变化时可触发重渲染
    this.state = {
      url: typeof window !== 'undefined' ? window.location.href : ''
    };
    // 方式2：直接挂载到实例上，不需要响应式更新时使用
    // this.url = typeof window !== 'undefined' ? window.location.href : '';
  }

  // 额外补充：如果项目不存在服务端渲染场景，也可以在仅客户端执行的componentDidMount中赋值，无需判断window
  // componentDidMount() {
  //   this.setState({ url: window.location.href })
  // }

  customHandler() {
    // 可以直接拿到存储的url值做逻辑处理
    const { url } = this.state;
    console.log('当前页面地址：', url)
  }

  render() {
    const { url } = this.state;
    return (
      <div onClick={() => this.customHandler()}>
        {url ? <span>当前地址：{url}</span> : <span>地址加载中</span>}
      </div>
    )
  }
}

提示：若你的项目未使用服务端渲染/静态生成等服务端执行组件代码的能力，可直接省略typeof window !== 'undefined'的判断，直接取window.location.href即可。

内容的提问来源于stack exchange，提问作者mrpbennett