如何使用 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="*"也不起作用

有什么簡單的解決方案嗎？

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>

Answer 2

React Router v6 不使用精確屬性來匹配精確路由。 默認情況下，它匹配確切的路線。 要匹配任何值，請在路由路徑中使用“*”。

  <BrowserRouter>
    <div className="App">
      <Header />
    </div>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>    enter code here

Answer 3

react router v6 沒有 Switch 所以你需要聲明 path='*'

<BrowserRouter> 
  <Routes> 
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact/>} />
    <Route path="*" element={<NotFound/>} />
  </Routes>
</BrowserRouter>

Answer 4

只需要渲染一個路徑為 * 的 Route，React Router 將確保僅在其他 Route 都不匹配時才渲染元素。 （如果您的 404 組件名稱是 PageNotFound>

<Route path="*" element={<PageNotFound/>} />

1 Stackblitz鏈接（它的實現有點不同）

2-最簡單的例子在這里

Answer 5

試試這是代碼：

export function AllRoutes(props) {

  return(
    <Routes>
<Switch>
 <Route exact path="/">
        <Home/>
      </Route>
      <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="*">
        <NotFound/>
      </Route>
</Switch>
    </Routes>
  )
}