ReactJS如何在组件文件内获取项目主URL（域名/基础路径）

原有代码报错原因 #

你遇到的Unexpected token {. Expected * for generator是基础语法错误，问题点如下：

• 类组件的类体顶层作用域不允许直接写const/let声明的变量，类体顶层只能定义类属性、类方法，你直接在类里写const { origin } = absoluteUrl(req)、const apiURL = ${origin}不符合类的语法规范
• 模板字符串语法缺少反引号包裹，${origin}必须放在`包裹的字符串中才会生效，直接写属于非法语法
• next-absolute-url依赖服务端的req对象，这个对象只在Next.js服务端渲染的上下文里存在，组件render阶段（尤其是客户端渲染阶段）拿不到这个对象，直接调用必然报错

不同场景的正确实现 #

纯客户端渲染(CSR)场景 #

不需要引入额外依赖，在组件挂载后通过浏览器原生window.locationAPI获取即可，注意不要在组件渲染的同步阶段直接访问window，避免SSR构建时报window未定义的错误。
类组件参考写法：

import { Component } from 'react'

class Header extends Component {
  state = {
    baseURL: ''
  }

  // 组件挂载后才执行，此时客户端window对象可用
  componentDidMount() {
    const origin = window.location.origin
    // 完整路径可以用window.location.href，主机名用window.location.host
    this.setState({
      baseURL: origin
    })
  }

  render() {
    const { baseURL } = this.state
    // 业务逻辑中直接使用baseURL即可
    return <header>当前站点地址：{baseURL}</header>
  }
}

export default Header

Next.js服务端渲染(SSR)场景 #

如果需要在服务端渲染阶段就拿到域名，不要在组件类内部直接调用next-absolute-url，要在Next.js提供的服务端数据获取方法中拿到req对象，处理完成后把结果作为props传入组件。
Pages Router参考写法：

import { Component } from 'react'
import absoluteUrl from 'next-absolute-url'

class Header extends Component {
  render() {
    const { baseURL } = this.props
    // 直接使用传入的props即可
    return <header>当前站点地址：{baseURL}</header>
  }
}

// 服务端数据获取方法，req对象仅在这里可访问
Header.getInitialProps = async ({ req }) => {
  const { origin } = absoluteUrl(req)
  return {
    baseURL: origin
  }
}

export default Header

补充说明 #

• 常用的location字段对应值：window.location.origin对应站点基础URL（协议+域名+端口），window.location.host对应主机名+端口，window.location.href对应当前页面完整路径
• 如果使用Next.js App Router，服务端组件可以直接引入headers方法读取请求头中的host字段，自行拼接origin即可

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