React bootstrap 导航栏需要一直刷新

问：

我正在为我的 spring boot 应用程序编写一个完全基本的 react bootstrap 前端。我从来没有用react写过前端，所以我遇到了一个奇怪的问题。我使用了 youtube 上的一些教程，展示了如何做到这一点。我正在一步一步地做，对我不起作用。我有导航栏，但是当我选择任何按钮时，上下文不会在另一个按钮上更改。它应该是动态的，但目前我需要刷新页面以获取另一个上下文。 索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './containers/App';
import reportWebVitals from './reportWebVitals';
import bootstrap from 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter } from 'react-router-dom';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

应用.js

import './App.css';
import React, { Component } from 'react';
import { Button} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import NavbarMenu from '../components/NavbarMenu';
import Article from '../components/Article';
import Item from '../components/Item';
import ReactDOM from 'react-dom';




function App(){
  return(
    <div className='App'>
      <header>
      <NavbarMenu/>
        {/* <h1>asd</h1> */}
      </header>
      
    

    {/* <main>
      <Article/>

    </main> */}

    </div>
  );
}
export default App;

import React from "react";
import { ReactDOM } from "react";
import { Component } from "react";
import { Navbar, Container, Nav, NavDropdown, Cards, Button  } from "react-bootstrap";
import { BrowserRouter as Router, Route, Link, Switch, BrowserRouter } from 'react-router-dom'
import Item from "./Item";
import Login from "./Login";

function NavbarMenu(){
    return(
        <Router>
            <div className="NavbarMenu">
                

                <Navbar bg="dark" variant="dark" expand="lg" >
                    <Container>
                    <Navbar.Brand href="#home">Warehouse</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="me-auto">
                        <Nav.Link as={Link} to="/home">Home</Nav.Link>
                        <Nav.Link as={Link} to="/item">Store</Nav.Link>
                        <Nav.Link >My Account</Nav.Link>
                        <Nav.Link as={Link} to="/login">Option 1</Nav.Link>
                        <Nav.Link >Option 2</Nav.Link>
                        <Nav.Link >Logout</Nav.Link>
                        <NavDropdown title="Dropdown" id="basic-nav-dropdown">
                            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.2">
                            Another action
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                            <NavDropdown.Divider />
                            <NavDropdown.Item href="#action/3.4">
                            Separated link
                            </NavDropdown.Item>
                            <NavDropdown.Item href="#action/3.4">
                            Logout
                            </NavDropdown.Item>
                        </NavDropdown>
                        </Nav>
                        <Button variant="light">Option 3</Button>
                    </Navbar.Collapse>
                    </Container>
                </Navbar>
            </div>
            <div>
            <Switch>
                <Route path="/item">
                    <Item />
                </Route>
                <Route path="/login">
                    <Login />
                </Route>
            </Switch>
                    
            </div>
            </Router>
        
    );
}
export default NavbarMenu;

  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "react": "^18.0.0",
    "react-bootstrap": "^2.4.0",
    "react-cookie": "^4.1.1",
    "react-dom": "^18.0.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.3.0",
    "react-scripts": "5.0.1",
    "reactstrap": "^8.10.0",
    "web-vitals": "^2.1.4"
  },
  "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"
    ],
    "proxy": "http://localhost:8080/"
  }
}

有人有解决方案吗？