反应，引导导航

编程问答 2022-05-28

问题描述

我是 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

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

解决方法

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

要走的路是使用 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>, 定义了您的应用程序的所有可能页面和相应的组件。
Link
  1. 使用 react-router-dom 中的 <Nav.Item key={id}> <Nav.Link as={Link} to={link} eventKey={link}> {name} </Nav.Link> </Nav.Item> 组件并将您的导航链接声明为：
Polyline polyline = new Polyline
{
StrokeColor = Color.Blue,StrokeWidth = 12
}
polyline.GeoPath.Add(new Position)

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

navnavreact-bootstrapreactjsreactjsreactjsreactjs