reactjs - 如何使用 react-router-dom v6 构建 404 页面

Question

我刚刚为 react-router-dom 升级到 v6beta，因为我想组织我的路由，但是 404 页面现在坏了：

export function AllRoutes(props) {

  return(
    <Routes>

      <Route path="/about-us">
        <Route path="contact">     <AboutContact/> </Route>
        <Route path="our-logo">    <AboutLogo/>    </Route>
        <Route path="the-mission"> <AboutMission/> </Route>
        <Route path="the-team">    <AboutTeam/>    </Route>
        <Route path="our-work">    <AboutWork/>    </Route>
      </Route>

      <Route path="/user">
        <Route path="sign-in"> <UserSignIn/> </Route>
        <Route path="sign-up"> <UserSignUp/> </Route>
      </Route>


      <Route path="/">
        <Home/>
      </Route>

      <Route >
        <NotFound/>
      </Route>

    </Routes>
  )
}

所以一切都按预期工作（包括主页），除了未找到的页面，即使添加path="/*"或path="*"

有什么简单的解决方案吗？

标签： reactjsreact-router

Answer 1

<Routes>

  // Use it in this way, and it should work:
  <Route path='*' element={<NotFound />} />

  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/settings" element={<Settings />} />
</Routes>