如何在React路由中配置路由不存在时的错误页面？

步骤1：创建错误页面组件 #

先写一个简单的错误页面组件，用来展示404提示：

function ErrorPage() {
  return (
    <div className="error-page">
      <h1>404 - 页面未找到</h1>
      <p>您访问的路径不存在，请检查地址后重试</p>
    </div>
  );
}

步骤2：修改路由配置 #

在你的Switch组件最后，移除原来的<Redirect to="/add-user" />，替换成一个不指定path（或者设置path="*"）的Route，用来匹配所有未被前面路由覆盖的路径：

修改后的完整代码：

// 错误页面组件
function ErrorPage() {
  return (
    <div className="error-page">
      <h1>404 - 页面不存在</h1>
      <p>抱歉，您访问的路径无法找到，请确认地址是否正确。</p>
    </div>
  );
}

function App() {
     return (
        <div className="app-container">
            <Switch>
                {routes.map(({ key, path, crumbs, renderComponent }) => {
                    return (
                        <Route key={key} path={path}>
                            {renderComponent(crumbs)}
                        </Route>
                    )
                })}
                {/* 匹配所有未命中的路径，渲染错误页面 */}
                <Route>
                    <ErrorPage />
                </Route>
            </Switch>
        </div>
    )
}

关键点说明 #

• Switch组件会从上到下匹配第一个符合条件的路由，所以错误页面的Route必须放在所有路由的最后，才能捕获未匹配的路径。
• 两种写法都能实现匹配所有路径：要么不写path属性，要么写path="*"，效果一致。
• 如果需要保留特定路径的重定向（比如旧路径跳转新路径），把Redirect放在错误页面Route的前面即可，比如：

<Switch>
  {/* 原有路由列表 */}
  {routes.map(...)}
  {/* 特定路径重定向 */}
  <Redirect from="/old-user" to="/add-user" exact />
  {/* 错误页面 */}
  <Route path="*">
    <ErrorPage />
  </Route>
</Switch>

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