React Bootstrap Nav组件className失效、按钮异常及鉴权渲染错误

问题根因 #

• 鉴权判断属性名大小写错误：UserStore 通过 getter 暴露的响应式鉴权字段为小写开头的 isAuth，组件中错误使用大写开头的 user.IsAuth 读取，该值恒为 undefined（假值），三目运算永远走未登录分支，仅渲染Auth按钮。
• 样式失效原因：
  1. 缺失Bootstrap核心CSS引入：React Bootstrap 组件本身不内置样式文件，所有依赖Bootstrap规则的布局、边距、组件样式都不会生效
  2. 类名版本不兼容：使用的 mr-auto、ml-2 是Bootstrap 4的边距类名，当前React Bootstrap 2.x+版本适配Bootstrap 5，左右边距类名已调整为逻辑属性写法：me-*（行尾/右侧边距）、ms-*（行首/左侧边距），旧类名无法被识别
• 按钮交互失效原因：Navbar内部未按规范设置布局，边距样式缺失导致元素挤压、点击区域错位，同时Exit按钮未绑定退出逻辑，点击无响应。

修复操作 #

1. 在项目入口文件（src/index.js/src/main.jsx）最顶部引入Bootstrap核心样式：

import 'bootstrap/dist/css/bootstrap.min.css'

2. 修正NavBar组件的属性名、类名、布局和交互逻辑，修复后代码如下：

import React, {useContext} from 'react';
import {Context} from "../index";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import {NavLink} from "react-router-dom";
import {SHOP_ROUTE} from "../utils/consts";
import {Button} from "react-bootstrap";
import {observer} from "mobx-react-lite";

const NavBar = observer(() => {
    const {user} = useContext(Context)
    return (
        <Navbar bg="dark" variant="dark" className="px-3">
            <NavLink style={{color:'white', textDecoration: 'none'}} to={SHOP_ROUTE}>ShopUS</NavLink>
            {user.isAuth ?
                <Nav className="ms-auto">
                    <Button variant={'outline-light'}>Admin</Button>
                    <Button 
                        variant={'outline-light'} 
                        className="ms-2"
                        onClick={() => user.setIsAuth(false)}
                    >
                        Exit
                    </Button>
                </Nav>
                :
                <Nav className="ms-auto">
                    <Button 
                        variant={'outline-light'} 
                        onClick={()=> user.setIsAuth(true)}
                    >
                        Auth
                    </Button>
                </Nav>
            }
        </Navbar>
    )
});

export default NavBar;

修复后效果：鉴权状态可正常响应切换，按钮自动靠导航栏右侧排列，边距样式正常生效，登录/退出按钮点击可正常切换状态。

内容的提问来源于stack exchange，提问作者Eugenemad