如何在React Router V6中显示404错误页面。

Question

我正在使用React作为我的Web应用程序前端。但在开发过程中，我遇到了React-Router-DOM V6的路由问题。问题是，如果没有匹配到任何路由，我想要显示404错误页面。这是我的代码：

import React from 'react';
import { BrowserRouter,Routes,Route} from 'react-router-dom';
import Home from "./Pages/Home"
import Allposts from './Pages/Allposts'
import Createpost from './Pages/Createpost'
import Error404 from './Pages/Error404'

const App = () => {
    return(
        <>
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Home />}/>
                <Route path="/all-posts" element={<Allposts />}/>
                <Route path="/create-post" element={<Createpost />} />
                <Route path="*" element={<Error404 />} />
            </Routes>
        </BrowserRouter>
        </>
    )
}

export default App;

您可以看到，我已经在路由的末尾添加了路径为“*”的catch all路由。这会捕获除嵌套路由以外的所有路由（这就是问题所在）。根据一般规则，它应该捕获所有路由，无论是嵌套还是非嵌套，并且应该显示404错误页面组件。当我使用路由“localhost:3000/all-posts/12345”时，因为该路由不存在，它应该显示404错误页面组件，而不是显示一个空白页面，并在控制台中弹出一个错误，指出找不到资源并显示404错误。

这就是问题所在。如何解决此问题并显示404错误页面组件。

- Study Planet

---

你在指哪些嵌套路由？请包含所有相关的代码，并说明你遇到了什么问题。https://stackoverflow.com/help/minimal-reproducible-example - Drew Reese

控制台报告的错误是什么？请确切说明。 - Phil

Answer 1

如果您能切换到这种方法，它将适用于所有嵌套组件。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

function Error404() {
  return <h2>404 Not found</h2>;
}

const router = createBrowserRouter([
  {
    path: '/',
    errorElement: <Error404 />,
    children: [
      {path: '', element: <Home /> },
      {path: 'all-posts', element: <Allposts /> },
      {path: 'create-post', element: <Createpost /> },
    ],
  },
]);

function Router() {
  return (
    <RouterProvider router={router} />
  );
}

export default Router;

- Nikhil Thakur

Answer 2

嗨，你试过了吗？

试试这个。

<Switch>
   <Route path='*' component={Error404} />
</Switch>

- hamid saifi

Answer 3

react 无法自行检查帖子是否存在， 您可以使用以下简单的检查来处理

if (post exists) {
  return <Post/>; //render Post info/details
} else {
  return <Error404 />; // if not redirect to 404
}

- Jeet Mukherjee