React-Router-Dom Home component renders on the bottom of each navigation link component-CodePudding

The code here in my App.js renders a Navbar & a home page.

import React from "react";
import './styles/global.css';
import Navbar from "./components/navbar/Navbar";
import Home from "./pages/Home";

function App() {
  return (
    <div className="app">
      <Navbar />
      <Home />
    </div>
  )
}

export default App;

Every time I click into a section of the navbar (search, about, contact) the component renders, but my Homepage component remains displaying at the bottom of one of what should be one of the three navigation components/pages. Here is my Navbar routing

import React from 'react';
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import About from '../../pages/About';
import SearchPage from '../../pages/SearchPage';
import Contact from '../../pages/Contact'
import './navbar.css';

function Navbar() {
  return (
    <BrowserRouter>
      <div className='navbar'>
        <h2>Nicole's Blog.</h2>
        <div className='navbar__list'>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/search">Search</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </div>
      </div>
      <Routes>
        <Route exact path='/search' element={<SearchPage />}></Route>
        <Route exact path='/about' element={<About />}></Route>
        <Route exact path='/contact' element={<Contact />}></Route>
      </Routes>
    </BrowserRouter>
  )
}
export default Navbar

CodePudding user response：

The Home component is rendered in your app below your navbar component. I would suggest moving the Routes to the App component.

Your navbar component shouldn't have the routes in it:

function Navbar() {
    return (
   <BrowserRouter>
            <div className='navbar'>
                <h2> Nicole's Blog. </h2>
                <div className='navbar__list'>
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/search">Search</Link>
                        </li>
                        <li>
                            <Link to="/about">About</Link>
                        </li>
                        <li>
                            <Link to="/contact">Contact</Link>
                        </li>
                       
                    </ul>
                </div>
            </div>

    )
}
export default Navbar

The App component should change to:

function App() {
  return (
    <div className="app">
      <BrowserRouter>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route exact path="/search" element={<SearchPage />}></Route>
          <Route exact path="/about" element={<About />}></Route>
          <Route exact path="/contact" element={<Contact />}></Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

CodePudding user response：

The Navbar component is rendering all the links and routes, and the App component is unconditionally rendering Home under the Navbar.

function App() {
  return (
    <div className="app">
      <Navbar />
      <Home /> // <-- always rendered
    </div>
  );
}

Remove Home from under Navbar and move it onto its own route.

function App() {
  return (
    <div className="app">
      <Navbar />
    </div>
  );
}

...

function Navbar() {
  return (
    <BrowserRouter>
      <div className='navbar'>
        <h2> Nicole's Blog. </h2>
        <div className='navbar__list'>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/search">Search</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>  
          </ul>
        </div>
      </div>
      <Routes>
        <Route path='/' element={<Home />} >
        <Route path='/search' element={<SearchPage />} />
        <Route path='/about' element={<About />} />
        <Route path='/contact' element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

From an organizational standpoint it may make more sense to wrap App with the router and move the routes into App under Navbar.

Example:

function App() {
  return (
    <BrowserRouter>
      <div className="app">
        <Navbar />
        <Routes>
          <Route path='/' element={<Home />} >
          <Route path='/search' element={<SearchPage />} />
          <Route path='/about' element={<About />} />
          <Route path='/contact' element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

...

function Navbar() {
  return (
    <div className='navbar'>
      <h2> Nicole's Blog. </h2>
      <div className='navbar__list'>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/search">Search</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>  
        </ul>
      </div>
    </div>
  );
}