反应，引导导航

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。

1. 将react-router-dom 添加到您的包管理器。
2. 用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>,

1. 使用来自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