React中如何实现仅在登录后显示BottomNavigation？

你可以通过两种方式实现需求，核心都是利用AuthContext中的currentUser状态判断用户登录状态，再决定是否渲染底部导航。

方法一：在导航组件内部判断登录状态 #

直接在MuiBottomNav组件中检查用户登录状态，未登录时不渲染导航：

修改MuiBottomNav.js：

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';
import { useAuth } from '../context/AuthContext'; // 导入useAuth钩子

const MuiBottomNav = () => {
  const [bnValue, setBnValue] = useState(0);
  const navigate = useNavigate();
  const { currentUser } = useAuth(); // 获取当前登录用户

  // 未登录时返回空，不渲染导航
  if (!currentUser) {
    return null;
  }

  return (
    <div>
      <BottomNavigation
        sx={{ width: "100%", position: "absolute", bottom: 0 }}
        value={bnValue}
        onChange={(event, value) => setBnValue(value)}
      >
        <BottomNavigationAction
          label="Profile"
          value={1} // 改为固定值，与BottomNavigation的value匹配
          onClick={() => navigate("/profile")}
          icon={<AddHomeIcon />}
        />
        <BottomNavigationAction
          label="Search"
          value={0} // 改为固定值，与BottomNavigation的value匹配
          onClick={() => navigate("/")}
          icon={<SearchIcon />}
        />
      </BottomNavigation>
    </div>
  )
}

export default MuiBottomNav

注意：修复了BottomNavigationAction的value属性，原来使用bnValue会导致选中状态异常，现在改为固定数值与BottomNavigation的value对应。

方法二：结合路由控制导航显示 #

如果需要在特定路由（如登录/注册页）即使登录了也不显示导航，可以在App.js中结合路由判断：

修改App.js：

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, useAuth } from './context/AuthContext';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import React from "react";
import MuiBottomNav from './components/MuiBottomNav';

// 封装内容组件，处理导航的条件渲染
function AppContent() {
  const { currentUser } = useAuth();
  const location = useLocation();
  // 定义不需要显示导航的路由
  const noNavRoutes = ['/login', '/register'];

  return (
    <>
      {/* 不在指定路由且已登录时，才显示导航 */}
      {!noNavRoutes.includes(location.pathname) && currentUser && <MuiBottomNav />}
      <Routes>
        <Route exact path="/" element={<SearchPage />} />
        <Route path='/register' element={<Register />} />
        <Route path='/login' element={<Login />} />
        <Route path='/profile' element={<Profile />} />
      </Routes>
    </>
  )
}

function App() {
  return (
    <>
      <Container className='d-flex align-items-center'
        style={{ minHeight: "100vh" }}>
        <div className='w-100' style={{ maxWidth: "400px" }}>
          <Router>
            <AuthProvider>
              <AppContent />
            </AuthProvider>
          </Router>
        </div>
      </Container>
    </>
  )
}

export default App;

关键注意点 #

• 确保所有需要访问currentUser的组件都在AuthProvider的包裹范围内，否则useAuth无法获取到用户状态
• AuthContext中的loading状态已经处理，初始化时不会出现currentUser为undefined的情况，因为AuthProvider会在加载完成后才渲染子组件

内容的提问来源于stack exchange，提问作者D.Hodges