React Router 404页面显示异常问题咨询

看起来你遇到的问题大概率是路由顺序不对或者没有正确使用Switch（v5）/Routes（v6）组件导致的。我来帮你一步步修复：

核心问题分析 #

React Router是按路由定义的顺序匹配的，而且如果不用Switch/Routes包裹，所有匹配路径的路由会同时渲染。404页面必须放在所有路由的最末尾，这样只有当前面的路由都匹配失败时，才会触发它。

针对你的代码的修复方案（假设是React Router v5） #

首先确保你已经导入了Switch组件，然后把所有路由包裹在Switch里，最后添加404路由：

import { Switch, Route } from 'react-router-dom';
// 别忘了导入你的NotFound组件
import NotFound from './path/to/NotFound';

function YourAppComponent() {
  return (
    <Switch>
      <Route path="/home" component={Home} exact={true}/>
      <Route path="/admin/forgot-password" component={AdminResetPassword} exact={true}/>
      <Authentication path="/admin/welcome" component={AdminWelcome} exact={true}/>
      <Authentication path="/admin/dashboard" component={AdminDashboard} exact={true}/>
      {/* 404路由必须放在最后，不要加exact */}
      <Route path="*" component={NotFound} />
    </Switch>
  );
}

关键注意点： #

• 必须用Switch包裹路由：Switch会确保只渲染第一个匹配的路由，避免404页面和其他路由同时显示。
• 404路由放在最后：保证前面的路由都匹配不到时才会触发。
• 不要给404路由加exact：path="*"本身就会匹配所有未被前面路由捕获的路径，加exact反而会限制它的匹配范围。

如果你用的是React Router v6 #

v6的写法有不少变化，比如用Routes代替Switch，用element代替component，并且移除了exact属性（默认精确匹配）。修复代码如下：

import { Routes, Route } from 'react-router-dom';
import NotFound from './path/to/NotFound';

function YourAppComponent() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/admin/forgot-password" element={<AdminResetPassword />} />
      {/* 注意Authentication组件的写法，v6里需要把子组件放在element里 */}
      <Route path="/admin/welcome" element={<Authentication><AdminWelcome /></Authentication>} />
      <Route path="/admin/dashboard" element={<Authentication><AdminDashboard /></Authentication>} />
      {/* 404路由依然放在最后 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

额外排查点 #

如果还是不行，检查这几点：

1. 确认NotFound组件本身没有语法错误，能正常渲染内容。
2. 检查URL是否真的没有匹配到前面的任何路由（比如有没有拼写错误，或者路由参数的问题）。

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