React Router navbar appears twice (V6)

user_16520049 0
Viewed 637

The navbar keeps appearing twice at the top and bottom of the page. When I inspect the page the elements show that App appears twice and duplicates the nav.

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;

nav.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;

published site: https://stoic-ritchie-b40b0f.netlify.app/

nav react-router-dom react-router reactjs
1 Answers

Issue

You are rendering the App component twice.

index.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')
);

Solution

Remove the second App component that isn't being rendered as a route layout component.

user_86908570
Related