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>
  )
}

CodePudding user response：

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>
  );
}

CodePudding user response：

There are multiple ways to solve this problem. As you mentioned you are just starting with react.js you can use conditional rendering.Please refer similar question and answer

Show BottomNavigation once the user is logged

Conditional rendering on react