反应，Bootstrap 导航

Question

我是 React 世界的新手，并且卡在了开头。

尝试使用 react-bootstrap 制作 Nav 菜单。一切正常，直到 Nav.Item 被更改. onSelect() 应更改 activeKey，并因此在单击时更改样式 Nav.Item。

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.tsx:

import NavMenu from "./components/NavMenu";

const navItems: any = [
    {id: 0, name: "Home", link:"home"},
    {id: 1, name: "First", link:"first"},
    {id: 2, name: "Second", link:"second"}
]


const App = () => {
    return (
        <>
            <NavMenu navItems={navItems}/>
        </>
    );
}

export default App;

NavMenu/idnex.tsx:

import {useState} from "react";
import {Nav} from "react-bootstrap";

const NavMenu = (props: any) => {
    const {navItems} = props;
    const [activeNav, setActiveNav] = useState('first')

    const handleClick = (eventKey: any) => setActiveNav(eventKey);

    console.log(activeNav)

    return (
        <div>
            <Nav
                defaultActiveKey="home"
                className="flex-column"
                activeKey={activeNav}
                variant="pills"
                navbar={true}
                onSelect={handleClick}
            >
            { navItems.map((item: any) => {
                const {id, link, name} = item;

                    return (
                        <Nav.Item key={id}>
                            <Nav.Link href={link}
                                      eventKey={link}>
                                {name}
                            </Nav.Link>
                        </Nav.Item>
                    );
                })}
            </Nav>
        </div>
    );
}

export default NavMenu;

package.json:

{
  "name": "nav-test-case",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "react-bootstrap": "1.4.0",
    "web-vitals": "^0.2.4",
    "bootstrap": "4.5.3",
    "typescript": "^4.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

变化暂时可见，然后回滚到默认设置 Nav.Item。所以它没有被选中点击Nav.Item，而不是默认设置的

在控制台中，我从日志中看到变量的变化

console.log(activeNav)

但是整个页面刷新并且日志也被重置

moment before refresh

如果有人能指出我正确的方向以找出我做错了什么，请拜托

Answer 1

据我所知，您希望在应用程序内部使用链接 - 但您所做的只是实现外部页面链接的方式。

方法是使用 react-router-dom。

添加 react-router-dom 与您的包管理器。
用 BrowserRouter 包装您的应用程序，并在 Switch 中定义您的页面可能的路由，它定义了您的应用程序的所有可能页面和相应的组件。

 <StrictMode>
   <BrowserRouter>
     <Switch>
       <Route exact path="/" component={App} />
       <Route exact path="/home" component={App} />
       <Route exact path="/first" component={App} />
       <Route exact path="/second" component={App} />
     </Switch>
   </BrowserRouter>
 </StrictMode>,

使用 react-router-dom 中的 Link 组件并将您的导航链接声明为：

<Nav.Item key={id}>
 <Nav.Link as={Link} to={link} eventKey={link}>
   {name}
 </Nav.Link>
</Nav.Item>

应该是这样。你可以在这里看到它的工作：https://codesandbox.io/s/competent-cherry-8hnu9

反应，Bootstrap 导航

React, Bootstrap Nav

css

nav

reactjs

react-bootstrap