reactjs - React Router 导航栏出现两次(V6)

Question

导航栏在页面的顶部和底部不断出现两次。当我检查页面时，元素显示 App 出现了两次并复制了导航。

应用程序.js:

import {Outlet} from "react-router-dom";
import './App.css';
import Nav from "./components/Nav";

function App() {
    return (
        <div className="App">
            <Nav/>
            <Outlet/>
        </div>
    );
}

export default App;

导航.js:

import {Link} from "react-router-dom";

function Nav(){
    return(
        <nav>
            <Link to ={"/"}>Home </Link>
            <Link to ={"/data"}>Data </Link>
            <Link to ={"/cool"}>Cool </Link>
        </nav>
    )
}

export default Nav;

发布站点:https://stoic-ritchie-b40b0f.netlify.app/

Answer 1

问题

您正在渲染 App 组件两次。

索引.js

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path={"/"} element={<App/>}> // <-- here as a layout component
          <Route index element={<Home/>}/>
          <Route path={"Box1"} element={<Box1/>}/>
          <Route path={"Box2"} element={<Box2/>}/>
          <Route path={"Box3"} element={<Box3/>}/>
          <Route path={"data"} element={<Data/>}>
            <Route index element={<Object/>}/>
            <Route path={"/data/:id"} element={<User/>}/>
          </Route>
          <Route path={"cool"} element={<Cool/>}/>
        </Route>
      </Routes>
      <App /> // <-- and again here by itself
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

解决方案

删除第二个 App 组件，它没有被渲染为路由布局组件。