react-router-dom v5 嵌套路由下useLocation返回location.key为undefined问题

常见根因 #

React Router v5 中该问题90%以上由三类问题导致：

• 嵌套层级的路由上下文被篡改/中断，空Route标签、多Router实例都会触发该问题
• 组件被React.memo/PureComponent浅比较阻断了路由上下文更新
• 嵌套Switch未显式绑定上层合法的location实例

排查步骤 #

1. 先在OverviewPage组件第一行调用useLocation()并打印完整返回值：
   • 如果此处key已经为undefined，说明OverviewPage本身没有拿到正确的路由上下文
   • 如果此处key正常，仅内部子Route里拿不到，是嵌套Switch未绑定正确location导致
2. 全局搜索BrowserRouter/HashRouter标签，确认项目仅在最顶层有一个Router实例，不存在嵌套Router的情况
3. 检查PrimaryLayout、OverviewPage的导出逻辑，确认是否被memo/PureComponent包裹

修复方案 #

方案1：修正嵌套路由写法（最高优先级） #

删掉OverviewPage里没用的外层空<Route>，给嵌套Switch显式传入上层合法的location：

import { useLocation, useRouteMatch } from 'react-router-dom'

function OverviewPage() {
  const location = useLocation()
  const { path } = useRouteMatch()
  // 此处先确认location.key正常
  return (
    <>
      {/* 原有页面内容 */}
      <Switch location={location}>
          <Route path={`${path}/:parentId`}>
               testingLocationKey {location.key}
          </Route>
          <Route path='*'>
               <Redirect to={path}/>
          </Route>
      </Switch>
    </>
  )
}

方案2：memo包裹组件的适配处理 #

如果组件被memo/PureComponent包裹，用withRouter高阶组件包裹导出，强制注入路由上下文：

import { withRouter } from 'react-router-dom'
import { memo } from 'react'

const OverviewPage = memo(() => {
  // 原有组件逻辑
})

export default withRouter(OverviewPage)

方案3：兜底全局存储location #

如果以上方案都不生效，可在顶层PrimaryLayout中拿到合法的location实例，存入自定义Context/全局状态库，嵌套组件直接从全局状态取location使用，绕开路由上下文的异常。

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