I’m new to React so I’ve been following a lot of tutorials to understand certain functionality. Currently I’ve implemented bottom navigation but I can’t find a solution on only displaying bottom navigation after I log in.

Here’s my app.js code:

import { Container } from 'react-bootstrap';
import Login from './components/Login';
import Register from './components/Register';
import SearchPage from './components/SearchPage';
import Profile from './components/Profile';
import { AuthProvider } from './context/AuthContext';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import React, { useState } from "react";
import MuiBottomNav from './components/MuiBottomNav';

function App() {
  return (
    <>
      <Container className='d-flex align-items-items-center'
        style={{ minHeight: "100vh" }}>
        <div className='w-100' style={{ maxWidth: "400px" }}>
          <Router>
            <AuthProvider>
              <MuiBottomNav />
              <Routes>
                <Route exact path="/" element={<SearchPage />} />
                <Route path='/register' element={<Register />} />
                <Route path='/login' element={<Login />} />
                <Route path='/profile' element={<Profile />} />
              </Routes>
            </AuthProvider>
          </Router>
        </div>
      </Container>
    </>
  )
}

export default App;

Here’s the bottom nav component

import AddHomeIcon from '@mui/icons-material/AddHome'
import SearchIcon from '@mui/icons-material/Search';
import { BottomNavigation, BottomNavigationAction } from "@mui/material";
import React, { useState } from "react";
import { useNavigate } from 'react-router-dom';

const MuiBottomNav = () => {
  const [bnValue, setBnValue] = useState(0);
  const navigate = useNavigate();
  return (
    <div>
      <BottomNavigation
        sx={{ width: "100%", position: "absolute", bottom: 0 }}
        value={bnValue}
        onChange={(event, value) => setBnValue(value)}
      >
        <BottomNavigationAction
          label="Profile"
          value={bnValue}
          onClick={() => navigate("/profile")}
          icon={<AddHomeIcon />}
        />
        <BottomNavigationAction
          label="Search"
          value={bnValue}
          onClick={() => navigate("/")}
          icon={<SearchIcon />}
        />
      </BottomNavigation>
    </div>
  )
}

export default MuiBottomNav

At the moment the bottom nav is displayed even on the Register and Login page. I’d like to only see it after logging in.

import React, { useContext, useEffect, useState } from "react";
import { auth } from '../firebase'

const AuthContext = React.createContext()

export function useAuth() {
  return useContext(AuthContext)
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState()
  const [loading, setLoading] = useState(true)

  function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password)
  }

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  function logout() {
    return auth.signOut()
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(user => {
      setCurrentUser(user)
      setLoading(false)
    })

    return unsubscribe
  }, [])

  const value = {
    currentUser,
    signup,
    login,
    logout
  }

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  )
}

>Solution :

The MuiBottomNav can access the AuthContext and conditionally render the nav contents if there is a truthy currentUser.

const MuiBottomNav = () => {
  const { currentUser } = useAuth(); // <-- access context

  const [bnValue, setBnValue] = useState(0);
  const navigate = useNavigate();

  if (!currentUser) return null; // <-- no user, return null

  return (
    <div>
      <BottomNavigation
        sx={{ width: "100%", position: "absolute", bottom: 0 }}
        value={bnValue}
        onChange={(event, value) => setBnValue(value)}
      >
        <BottomNavigationAction
          label="Profile"
          value={bnValue}
          onClick={() => navigate("/profile")}
          icon={<AddHomeIcon />}
        />
        <BottomNavigationAction
          label="Search"
          value={bnValue}
          onClick={() => navigate("/")}
          icon={<SearchIcon />}
        />
      </BottomNavigation>
    </div>
  );
}