NextJS 9.3.0项目未用react-router，获取URL路径报window未定义如何解决

ReferenceError: window is not defined 报错是因为Next.js具备服务端渲染（SSR）能力，组件在服务端Node.js环境执行时不存在window对象，直接调用window相关API就会触发该错误。

方案1：调整执行时机+环境判断 #

如果你仍想使用window.location API，只需保证相关逻辑仅在客户端执行即可：

• 把方法调用放在仅客户端触发的componentDidMount生命周期中
• 方法内新增环境判断避免服务端执行时报错

代码示例：

fetch_window_URL = () => {
  // 服务端环境直接终止执行，避免报错
  if (typeof window === 'undefined') return
  const fullHref = window.location.href
  console.log(`URL is ${fullHref}`)
  const purePath = window.location.pathname
  console.log(`Path is ${purePath}`)
  // 后续提取目标子串的逻辑写在这里即可
}

componentDidMount() {
  // componentDidMount仅在客户端执行，此时window已存在
  this.fetch_window_URL()
}

方案2：使用Next.js原生路由API（更推荐） #

Next.js内置路由能力无需依赖react-router，使用withRouter高阶组件包裹类组件，即可直接获取路径信息，无需操作window，适配服务端+客户端双环境：

1. 导入依赖

import { withRouter } from 'next/router'
import React, { Component } from 'react'

2. 包裹组件获取路由属性

class YourComponent extends Component {
  componentDidMount() {
    // asPath为浏览器实际访问的完整路径，split处理过滤掉可能存在的查询参数
    const purePath = this.props.router.asPath.split('?')[0]
    console.log('纯路径：', purePath)
    // 在这里执行你的子串提取逻辑即可
  }
  // 其余组件逻辑...
}

// 用withRouter包裹组件后路由对象会注入到props中
export default withRouter(YourComponent)

补充说明 #

• 如果你需要的是路由定义的模板路径（比如动态路由/post/[id]），可以用this.props.router.pathname
• 如果你需要实际访问的真实路径（比如/post/123），用this.props.router.asPath即可

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