CODEWITHSUNDEEP
javascripthtmlcssreactjsreact-router
dense8
dense8

Reputation: 718

React navigation bar is in the screen even though it is not on the router

We are trying to implement a react project that has 3 different types of the same application for 3 different purposes. Think of it like the user will choose which to use on the main screen. All 3 types has similar but different page structure, different navbar etc.

I used a router for the main page where they choose which application type they want to go, with path "/", and used different routers for different types for applications because their navbar etc. is different. But the navbar appears in the main screen even while it is not present in the router.

I know it sounds complicated but I will show it with code snippets and screenshots.

App.js

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path = "/" exact element={<CirclePage />}/>
        </Routes>
      </Router>

      <Router>
        <Routes>
          <Route path = "/homepage-clubs" exact element={<HomepageClubs />}/>
        </Routes>
      </Router>

      <Router>
        <Navbar/>
        <Routes> 
          <Route path='/homepage' exact element={<Homepage />}/> 
          <Route path='/events' exact element={<Events/>}/>
          <Route path='/clubs' exact element={<Clubs/>}/>
          <Route path='/contact' exact element={<Contact/>}/>
          <Route path='/notifications' exact element={<Notifications/>}/>
          <Route path='/profile' exact element={<Profile/>}/>
        </Routes>
      </Router>
    </>
  );
}
export default App;

Navbar is the navbar I wrote in react.

The home screen is like this atm: application screen at first initialization

I have no clue why there is a navbar below the screen. I may not have understood how really routers work, I am not sure. I need that navbar to go away because every type of application will have a different kind of navbar (I will create different navbars for them) and navbar should not be visible on the main screen. What could be the problem?

Upvotes: 3

Views: 629

Answers (1)

Drew Reese
Drew Reese

Reputation: 203155

You are rendering all three routers at the same time, and the third one includes the Navbar component, which is also always rendered. You should use a single router to render all the routes. If you want different layouts for specific routes then you can use a wrapper component to render the Navbar. Render the last set of routes into a generic route that matches anything not more specifically matched, along with the Navbar.

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path="/" element={<CirclePage />} />
          <Route path="/homepage-clubs" element={<HomepageClubs />} />
          <Route
            path="*"
            element={
              <>
                <Navbar />
                <Routes>
                  <Route path="/homepage" element={<Homepage />} />
                  <Route path="/events" element={<Events />} />
                  <Route path="/clubs" element={<Clubs />} />
                  <Route path="/notifications" element={<Notifications />} />
                  <Route path="/profile" element={<Profile />} />
                </Routes>
              </>
            }
          />
        </Routes>
      </Router>
    </>
  );
}

Upvotes: 1

Related Questions