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

Question

我正在为我的 webapp 前端使用 React。 但是在开发过程中，我遇到了 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 routes Route，路径等于“*”标记。 这会捕获除嵌套路由之外的所有路由（这就是问题所在）。 按照一般规则，它应该捕获所有嵌套或未嵌套的路由，并且应该显示 404 错误页面组件。 当我使用路由“localhost:3000/all-posts/12345”时 <--- 因为这条路由不存在，所以它应该显示 404 错误页面组件而不是显示它，它只显示一个空白页面并弹出一个错误控制台说找不到资源，错误为 404 就是这样。

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

Answer 1

嗨，你试过了吗？

尝试这个

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

Answer 2

如果帖子存在或不存在，反应无法自行检查，您可以像这样进行简单检查来处理它

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

Answer 3

如果您可以切换到此方法，它也适用于所有嵌套组件。

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;