如何在 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;

正如您所看到的，我在末尾添加了捕获所有路线 Route ，路径等于“*”标记。这会捕获除嵌套路由之外的所有路由（这就是问题所在）。按照一般规则，它应该捕获所有路由，无论是否嵌套，并且应该显示 404 错误页面组件。当我使用路由“localhost:3000/all-posts/12345”<---因为该路由不存在时，它应该显示 404 错误页面组件，而不是显示它，它只显示一个空白页面，并在控制台显示找不到资源，错误为 404 就是这样。

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

Answer 1

你好，你尝试过吗？

尝试这个

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