React路由，如何更改路由配置，实现定义功能缺失404功能？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

在前面的文章里面，已经实现了react路由的自定义首页功能。设置的方法，非常简单，只涉及了path和index这两个属性。具体代码上来看的话，和react路由的实现方式有关。而本文的涉及的功能缺失404功能，也非常的简单。一句话来说，就是设置path为*即可。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的编程心得体会。本文测试环境：nodejs@20.18.0，create-react-app@5.0.1，react-router-dom@6.27.0，react@18.3.1。

Routes实现404

前置阅读文章：

• https://newsn.net/say/react-router-routes.html

关键代码：

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function App() {
  return (
    <Router>
      <div className="App">
          404代码演示
          <Routes>
            <Route path="/" element={<div>index page</div>} />
            <Route path="*" element={<div>404 not found</div>} />
          </Routes>
      </div>
    </Router>
  );
}
export default App;

不设置保底的404 route的话，页面上并不会显示相关错误信息。但是f12里面可能会有调试信息输出。

RouterProvider实现404

import { RouterProvider, createBrowserRouter } from "react-router-dom";
const router = createBrowserRouter([
  { path: "/", element: <div>index page</div> },
  { path: "*", element: <div>404 not found</div> },
]);
function App() {
  return (
    <div className="App">
      404演示2
      <RouterProvider router={router}></RouterProvider>
    </div>
  );
}
export default App;

不设置保底的404 route的话，页面上会显示相关错误信息，这个是和上面的路由设置完全不同的地方。

路由条目位置

据说，在react route@v6版本里面，路由配置的顺序并不会影响结果了。

所以，这条path为*的路由信息，在整体路由中的位置并不重要，但是在编程习惯上来说，最好把它放在最后一条，毕竟是用来保底的路由嘛。

结束语

更多react经验文章，可以参考苏南大叔的系列文章：

• https://newsn.net/tag/react

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。