React-Bootstrap 菜单不显示当前选择

Question

例如，在下图中，选择的菜单是关于，地址字符串显示它，但菜单选项卡仍然显示主页

我是Bootstrap

的新手

代码是这样的：

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

    return (
        <Nav variant="pills" activeKey="home" onSelect={handleSelect} defaultActiveKey="home">
            <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>
    );
}

我错过了什么？

拉斐尔

Answer 1

因此，要处理状态重置，您需要为路由使用 React 路由器，而不仅仅是 hrefs

你需要安装 react-router-dom 和 react-router-bootstrap 包作为嗯

这是一个工作示例：

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

import React, { useState } from 'react';
import { Nav, NavDropdown } from 'react-bootstrap';
import { BrowserRouter as Router } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';

export default function NavTabs({ active_key }) {
  const [key, setKey] = useState(active_key);

  const handleSelect = (key) => {
    console.log(`selected ${key}`);
    setKey(key);
  };

  console.log(`Rendering with ${key}`);
  return (
    <Router>
      <Nav variant="pills" activeKey={key} onSelect={handleSelect}>
        <LinkContainer to="/home">
          <Nav.Link eventKey="home">Home</Nav.Link>
        </LinkContainer>
        <LinkContainer to="/about">
          <Nav.Link eventKey="about" title="about">
            About
          </Nav.Link>
        </LinkContainer>
        <LinkContainer to="/contacts">
          <Nav.Link eventKey="contact">Contact</Nav.Link>
        </LinkContainer>
        <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>
    </Router>
  );
}

并且当您使用此组件时（例如来自 <App>），请提供起始选项卡：

function App() {
  return (<NavTabs active_key="home"/>)
}

React-Bootstrap 菜单不显示当前选择

React-Bootstrap menus do not show the current selection

react-bootstrap

bootstrap-4

react-bootstrap-nav