React Router Conditional Rendering of NavBar

Question

I've a navbar that i want to hide when the user is logged in.I don't want to display the NavBar when the user is at the '/auth' endpoint. I tried a conditional rendering but it doesn't work.

Code :

import React from 'react';
import Navbar from './Navbar';
import { BrowserRouter as Router, Routes, Route ,Navigate} from 'react-router-dom';
import {Login} from './Login';
import {SignUp} from './SignUp'
import { Home } from './Home';
import Freecomponent from './Freecomponent';
import AuthComponent from './AuthComponent';
import Cookies from 'universal-cookie';

function App() {
    const cookies = new Cookies();
    
return (
    <Router>
    {window.location.href === '/auth' ? null :  <Navbar />}
    <Routes>
    
        <Route path='/' element={<div><Home /></div>} exact />
        <Route path='/signup' element={<SignUp />} />
        <Route path='/signin' element={<Login />} />
        <Route path='/free' element={<Freecomponent />} />
        <Route path='/auth' element={cookies.get("TOKEN") ? <AuthComponent /> : <Navigate to='/' />} />
        
    </Routes>
    </Router>
);
}

export default App;

Can you fix the title or the text? When do you want to display the NavBar exactly? Also: post code, not images of code. — , Aug 07 '22 at 14:04

score 0 · Answer 1 · answered Aug 07 '22 at 15:13

So this is the solution i came up with , i used Outlet from react-router-dom.

Code :

import React from 'react';
import Navbar from './Navbar';
import { BrowserRouter as Router, Routes, Route ,Navigate,Outlet} from 'react-router-dom';
import {Login} from './Login';
import {SignUp} from './SignUp'
import { Home } from './Home';
import Freecomponent from './Freecomponent';
import AuthComponent from './AuthComponent';
import Cookies from 'universal-cookie';

function App() {
    const cookies = new Cookies();
    
return (
    <Router>
    <Routes>
    <Route path='/' element={<Layout />}>
        <Route index element={<div><Home /></div>} exact />
        <Route path='/signup' element={<SignUp />} />
        <Route path='/signin' element={<Login />} />
        <Route path='/free' element={<Freecomponent />} />
    </Route>
    <Route path='/auth' element={cookies.get("TOKEN") ? <AuthComponent /> : <Navigate to='/' />} /> 
    </Routes>
    </Router>
);
}
 function Layout () {
    return (
        <div>
            <Navbar />
            <div className="container">
              
              <Outlet />
            </div>
        </div>
    )
}

export default App;

c0m1t · Accepted Answer · 2022-08-07T14:49:35.010

React components are rendered whenever their props, state or context change. In your case window.location.href is none of the above. So when URL changes, React will not rerender App component.

You may use useLocation hook which will cause a rerender when the location changes. useLocation hook must be used inside of Router component, So you should rearrange your components in a way that Navbar component is rendered when user is inside Router component.
Store the status of the user(whether or not they are logged in or not, their JWT, etc in a state) which make React to rerender App component. You can use either state or context for that.

Edit:

function App() {
  // isLoggedIn should be read from state, props or context to make React to rerender this component
  const isLoggedIn = ...

  if (isLoggedIn) {
    return (
      <Routes>// Whatever you want to render when user is logged in</Routes>
    );
  }

  return <Routes>// Whatever you want to render when user is not logged in</Routes>;
}

Also as far as I remember, you can only render Route component inside Routes. There could be some workarounds but they are not needed.

Whatever you approach you choose, React rerenders your components only when their state, props or their context changes. Changing properties from javascript objects, like `window` will not rerender your components. Also as I mentioned you probably should not render any component rather that `Router` inside `Routes`. If you search goolge you will find different possible solutions. — c0m1t, Aug 07 '22 at 14:51

React Router Conditional Rendering of NavBar

2 Answers2