javascript - react 路由器用作 <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 属性上渲染每个路由的组件。

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

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