React-Bootstrap导航菜单无法显示当前选中项问题求助

云上老周

2026-10-5

问题根因

你在
组件上把activeKey属性写死为固定值"home"，没有绑定你声明的key状态变量，无论用户选中哪个菜单项，组件始终会将home判定为激活项，因此高亮不会切换。同时你已经使用受控模式（手动维护activeKey和选中状态），不需要再配置defaultActiveKey属性，该属性仅用于非受控组件场景。
你使用原生href属性实现跳转，点击后页面会整体刷新，useState存储的选中状态会被重置为初始值"home"，哪怕你修改了activeKey的绑定，刷新后高亮也会回到home项。

修复方案

基础修复（解决受控绑定问题）

仅需修改

组件的属性配置即可修复切换时的高亮问题：

import React, { useState } from 'react';
import { Nav, NavDropdown } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function NavSample() {
    const [key, setKey] = useState('home');

    const handleSelect = (key) => {
        setKey(key);
    };

    // 仅修改Nav组件的属性，删除冗余的defaultActiveKey、把固定的activeKey替换为状态变量
    return (
        <Nav variant="pills" activeKey={key} onSelect={handleSelect}>
            <Nav.Item>
                <Nav.Link eventKey="home" href="/home">
                    Home
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="about" href="/about" title="about">
                    About
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="contact" href="/contact">Contact</Nav.Link>
            </Nav.Item>
            <NavDropdown title="Pricing" id="nav-dropdown">
                <NavDropdown.Item eventKey="Basic pricing" href="/pricing/basic pricing">Basic</NavDropdown.Item>
                <NavDropdown.Item eventKey="Corporate Pricing" href="/pricing/corporate pricing">Corporates</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item eventKey="Enterprise Pricing" href="/pricing/enterprise pricing">Enterprise</NavDropdown.Item>
            </NavDropdown>
        </Nav>
    );
}

单页应用最优方案（配合React Router）

如果你的项目是React单页应用，推荐配合React Router实现无刷新跳转，同时可以直接通过当前路径自动匹配激活项，不需要手动维护选中状态：

import React from 'react';
import { Nav, NavDropdown } from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function NavSample() {
    // 自动获取当前路径
    const location = useLocation();
    // 路径和eventKey的映射关系，可根据实际路由规则调整
    const getActiveKey = () => {
        const path = location.pathname;
        if(path === '/home') return 'home';
        if(path === '/about') return 'about';
        if(path === '/contact') return 'contact';
        if(path.includes('/pricing')) return path.split('/')[2];
        return 'home';
    };

    return (
        <Nav variant="pills" activeKey={getActiveKey()}>
            <Nav.Item>
                <Nav.Link as={Link} eventKey="home" to="/home">
                    Home
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link as={Link} eventKey="about" to="/about" title="about">
                    About
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link as={Link} eventKey="contact" to="/contact">Contact</Nav.Link>
            </Nav.Item>
            <NavDropdown title="Pricing" id="nav-dropdown">
                <NavDropdown.Item as={Link} eventKey="Basic pricing" to="/pricing/basic pricing">Basic</NavDropdown.Item>
                <NavDropdown.Item as={Link} eventKey="Corporate Pricing" to="/pricing/corporate pricing">Corporates</NavDropdown.Item>
                <NavDropdown.Divider />
                <NavDropdown.Item as={Link} eventKey="Enterprise Pricing" to="/pricing/enterprise pricing">Enterprise</NavDropdown.Item>
            </NavDropdown>
        </Nav>
    );
}

如果是多页应用场景，建议在组件初始化时通过window.location.pathname匹配对应的激活key作为useState的初始值，避免页面刷新后高亮重置。

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

React-Bootstrap导航菜单无法显示当前选中项问题求助

基础修复（解决受控绑定问题） #

基础修复（解决受控绑定问题）