React中NotFound组件异常：404页面在所有页面显示的解决求助

嘿，这个问题我之前也碰到过！核心原因是React Router默认会渲染所有匹配成功的路由组件，你写的path="*"会匹配任何路径，所以它会和你的其他页面路由一起被渲染出来。解决办法很简单，就是让路由做「排他性匹配」——只渲染第一个匹配到的路由，下面分React Router的两个常用版本给你说具体怎么做：

React Router v5 修复方案 #

在v5版本里，你需要用<Switch>组件把所有路由包裹起来。<Switch>的作用就是按顺序匹配路由，只渲染第一个匹配成功的组件，这样当用户访问已存在的页面时，前面的路由会被匹配到，就不会再渲染NotFound了。

记得把NotFound的路由放在所有其他路由的最后，示例代码如下：

import { Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Switch>
      {/* 先定义所有正常页面的路由 */}
      <Route path="/dashboard" component={Dashboard} />
      <Route path="/profile" component={Profile} />
      {/* 最后放404路由 */}
      <Route path="*" component={NotFound} />
    </Switch>
  );
}

React Router v6 修复方案 #

v6版本已经移除了<Switch>，改用<Routes>组件，它本身就自带了排他性匹配的特性。同时路由的写法也有变化，需要用element属性来指定渲染的组件（不再用component）。

同样要把NotFound路由放在最后，示例代码：

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      {/* 先定义所有正常页面的路由 */}
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/profile" element={<Profile />} />
      {/* 最后放404路由 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

如果你的项目是v6版本，要确保安装的是react-router-dom@6，别和v5的写法混着用哦！

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