React 路由器 dom 沒有渲染組件

Question

這是我的代碼

function App() {
  return (
    <div className="app">
      <BrowserRouter>
        <Header></Header>
        <Routes>
          <Route path='/' exact element={<Home />} />
          <Route path='/movie/:imdbID' element={<MovieDetails />} />
          <Route element={<PageNotFound />} />
        </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

我想要的是當我輸入無效的PageNotFound時顯示 PageNotFound。 但它永遠不會出現。 我嘗試將它放在頂部，在<Routes>之后，但結果相同。

Answer 1

您可以將*添加到路徑中，它將呈現。

function App() {
  return (
    <div className="app">
      <BrowserRouter>
        <Header></Header>
        <Routes>
          <Route path='/' exact element={<Home />} />
          <Route path='/movie/:imdbID' element={<MovieDetails />} />
          <Route exact path='*' element={<PageNotFound />} />
        </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

Answer 2

react-router-dom@6中的路由順序無關緊要，因為路由現在使用路由路徑排名系統來匹配最合適的路徑。 路線現在也總是完全匹配，因此不再有任何exact道具。

匹配路徑的Route組件仍然需要一個path道具。 指定通配符"*"路徑以匹配任何更具體的路徑不匹配的任何內容。

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

請參閱如何在 react-router v6 中添加不匹配 (404) 路由

Answer 3

// use it in this way it will work 

function App() {
  return (
    <div className="app">
      <BrowserRouter>
        <Header></Header>

        <Routes>
          <Route   path='*' element={<PageNotFound />} />
          <Route path='/' exact element={<Home />} />
          <Route path='/movie/:imdbID' element={<MovieDetails />} />
         
        </Routes>
        <Footer />
      </BrowserRouter>
    </div>
  );
}