React-Router V6 如何在404页面获取跳转前的未知路由详情

报错根因 #

你遇到的报错是因为违反了React Hook的使用规则：useLocation() 只能在React函数组件的顶层作用域调用，不能直接在 <Route> 的 element 属性的JSX表达式内直接使用。

方案1：直接挂载404组件到通配符路由（推荐） #

该方案无需做额外路由跳转，用户访问无效地址时路径保持原始输入值，体验更友好，也不需要额外做参数传递：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Homepage />} />
    {/* 其他业务路由 */}
    {/* 通配符路由直接匹配所有无效地址，挂载404组件 */}
    <Route path="*" element={<NoPageFound />} />
  </Routes>
</BrowserRouter>

在 <NoPageFound /> 组件内直接调用 useLocation() 即可拿到用户访问的无效路由信息：

import { useLocation } from 'react-router-dom';

const NoPageFound = () => {
  const currentLocation = useLocation();
  // 直接获取无效地址信息用于展示、日志上报
  const invalidPath = currentLocation.pathname;
  const invalidSearch = currentLocation.search;

  return (
    <div>
      <h1>404 页面不存在</h1>
      <p>你访问的地址 {invalidPath}{invalidSearch} 不存在</p>
    </div>
  );
};

方案2：封装重定向组件传递路由状态 #

如果你必须要求跳转后路由变为 /404，可以封装独立的重定向组件处理参数传递：

1. 先封装重定向组件，在组件内部合法调用Hook

import { Navigate, useLocation } from 'react-router-dom';

const NotFoundRedirect = () => {
  const invalidLocation = useLocation();
  // replace属性可以避免无效地址进入历史栈，用户点回退直接回到上一个有效页面
  return <Navigate to="/404" state={{ invalidRoute: invalidLocation }} replace />;
};

2. 修改路由配置，使用封装的重定向组件

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Homepage />} />
    <Route path="/404" element={<NoPageFound />} />
    {/* 其他业务路由 */}
    <Route path="*" element={<NotFoundRedirect />} />
  </Routes>
</BrowserRouter>

3. 在 <NoPageFound /> 组件内从路由状态取值

import { useLocation } from 'react-router-dom';

const NoPageFound = () => {
  const location = useLocation();
  const invalidRoute = location.state?.invalidRoute;
  // 异常逻辑兜底
  const invalidPath = invalidRoute?.pathname || '未知地址';

  // 此处可执行日志上报逻辑
  console.log('无效访问地址：', invalidPath);

  return (
    <div>
      <h1>404 页面不存在</h1>
      <p>你访问的地址 {invalidPath} 不存在</p>
    </div>
  );
};

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