整个页面的未找到页面呈现

Question

在下面的App.js文件中，路由组件包裹了网站的一部分，但如果输入错误url，我需要为整个页面呈现NotFound组件，请指教关于在这种情况下如何做到这一点，感谢您的反馈

const App = () => {
  return (
    <Box>
      <CssBaseline />
      <Navbar />
      <Routes>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/tours" element={<Tours />} />
        <Route path="/music" element={<Music />} />
        <Route path="/contact" element={<ContactUs />} />
      </Routes>
      <Testimonials />
      <Footer />
    </Box>
  );
};

Answer 1

您可以在所有有效路由后简单地使用通配符路径 "*"。通过这种方式，它将首先尝试将当前用户的路径与 <Route/> 中提供的路径匹配，如果该路径与现有的 route 匹配，它将呈现 路由的 组件。当它与您现有的路径不匹配时，它将呈现 wildcard route 并且在通配符路由内，您可以呈现 404 Not Found 页面。例如：

const App = () => {
  return (
    <Box>
      <CssBaseline />
      <Navbar />
      <Routes>
        <Route path="/" element={<Navigate to="/home" />} />
        <Route path="/home" element={<Home />} />
        <Route path="/tours" element={<Tours />} />
        <Route path="/music" element={<Music />} />
        <Route path="/contact" element={<ContactUs />} />
        <Route path="*" element={<NotFoundComponent/>} />
      </Routes>
      <Testimonials />
      <Footer />
    </Box>
  );
};

注意： <Route path="*"/> 应该放在所有现有路由之后，否则你的 React 应用程序将呈现一个 404 页面时间

Answer 2

你所要做的就是渲染一个带有 path = " * " 的路由，React Router 将确保只如果其他路由的 none 匹配，则呈现元素。

对于 react-router 版本 6

<BrowserRouter>
  <Routes>
    <Route path="/" exact element={<Home />}></Route>
    <Route path="*" element={<PageNotFound />}></Route>
  </Routes>
</BrowserRouter>

将 url 显示为 404 未找到页面

Redirect 组件已从 react-router 版本 6 中删除。对于 react-router-dom v6，只需将 Redirect 替换为 Navigate

<Route path="/404" element={<PageNotFound></PageNotFound>} />
<Route path="*" element={<Navigate replace to="/404" />} />

Answer 3

使用呈现 Navbar、Testimonials、Footer、 和 [=37= 的布局路由] 一个 Outlet 用于要渲染到的嵌套 Route 组件。 NotFound 组件在布局路由之外渲染。

阅读更多关于布局路线的信息here。

示例：

import { Outlet } from 'react-router-dom'; const App Layout = () => ( <> <Navbar /> <Outlet /> // <-- nested routes render here <Testimonials /> <Footer /> </> );

...

const App = () => { return ( <Box> <CssBaseline /> <Routes> <Route element={<AppLayout />}> <Route path="/home" element={<Home />} /> <Route path="/tours" element={<Tours />} /> <Route path="/music" element={<Music />} /> <Route path="/contact" element={<ContactUs />} /> </Route> <Route path="/" element={<Navigate to="/home" />} /> <Route path="*" element={<NotFound />} /> </Routes> </Box> ); };

如果 NotFound 组件不需要基础 CSS 样式或 Box 容器，则将它们也移至 AppLayout 组件中。

整个页面的未找到页面呈现

Not Found page rendering for an entire page

javascript

reactjs

react-router

material-ui