反應路由器用作的孩子<Routes>元素錯誤

Question

我創建了一個 react 應用程序並使用 react-router-dom 進行導航。 當我用 BrowseRouter 包裝 app.js 時，會顯示以下錯誤。

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

以下是我的 App.js

import {BrowserRouter, Route} from 'react-router-dom'

    function App() {
      return (
     
     <BrowserRouter>
     
        <div className="App">
    
          <Header/>
    
          <Route exact path="/">
            <Home/>
          </Route>
            
          <Footer/>
      </div>  
      </BrowserRouter> 
      );
    }

Answer 1

您應該將所有Route組件包裝在一個Routes組件中，並在element prop 上為每個路由渲染組件。

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

          <Routes>
            <Route path="/" element={<Home />} />
          </Routes>
          <Footer />
        </div>
      </BrowserRouter>
    </div>
  );
}

Answer 2

    import {BrowserRouter, Route,Switch} from 'react-router-dom'

    function App() {
      return (
     
    
     
        <div className="App">
    
          <Header/>
     <BrowserRouter>
<Switch>
          <Route exact path="/">
            <Home/>
          </Route>
</Switch>
            </BrowserRouter>
          <Footer/>
      </div>  
       
      );
    }

或在 React-router-dom 版本 6 中：

import {BrowserRouter, Route,Switch,Routes} from 'react-router-dom'

    function App() {
      return (
     
    
     
        <div className="App">
    
          <Header/>
     <BrowserRouter>
<Routes>
          <Route exact path="/">
            <Home/>
          </Route>
</Routes>
            </BrowserRouter>
          <Footer/>
      </div>  
       
      );
    }