如何在React中使用Bootstrap Nav实现多页面跳转，解决URL更新页面不刷新问题

• 首先你代码里存在语法错误：NavBar的handleSelect函数中，你写了let path={eventKey}，这里把路由字符串包裹成了对象，赋值给window.location的实际是对象而非路径字符串，本身就无法正常触发页面跳转加载。
• 其次你的开发模式不匹配：你现在给每个页面单独写ReactDOM.render是多页应用的写法，但你本地启动的是React单页应用开发服务（比如create-react-app默认启动的服务），所有路由默认都会返回根目录的index.html，不会单独加载你写的companies.js等独立页面文件，所以就算URL变了也不会渲染对应内容。
• 额外问题：你用原生window.location跳转会强制刷新整个页面，不符合React单页应用无刷新跳转的体验要求。

这是React官方推荐的单页应用路由实现方案，无需刷新页面即可切换内容。

1. 安装React Router依赖
   执行命令：

npm install react-router-dom@6

2. 重构页面组件，删除冗余挂载逻辑
   修改你的Companies.js，删掉ReactDOM.render相关代码，只导出普通组件：

import './index.css';
import React from 'react';
import {ImageGrid} from './charts.js';
import NavBar from './navbar.js';

export default function Companies() {
  return (
    <div>
      <NavBar />
      <ImageGrid />
    </div>
  )
}

同理按照这个格式重构你的Home、Login页面为独立导出组件。
3. 入口文件配置全局路由
修改项目根入口文件（一般为src/index.js），配置路由规则：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home'; // 对应你自己的首页组件
import Login from './Login'; // 对应你自己的登录页组件
import Companies from './Companies';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/companies" element={<Companies />} />
    </Routes>
  </BrowserRouter>
);

4. 修改NavBar组件，使用路由跳转

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Nav from 'react-bootstrap/Nav';
import { Link } from 'react-router-dom';

export default function NavBar() {
  return (
    <Nav variant="pills" activeKey={window.location.pathname}>
      <Nav.Item>
        <Nav.Link as={Link} to="/">
          Home
        </Nav.Link>          
      </Nav.Item>
      <Nav.Item>
        <Nav.Link as={Link} to="/login">
          Login
        </Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link as={Link} to="/companies">
          Companies
        </Nav.Link>
      </Nav.Item>
    </Nav>
  );
}

如果你暂时不想改路由配置，只需要修改NavBar里的handleSelect错误即可，但跳转时会刷新整个页面：

const handleSelect = (eventKey) => {
    // 去掉包裹eventKey的大括号，直接赋值路径字符串
    let path = eventKey;
    window.location.href = path;
};

该方案需要你把静态页面文件都放到项目的public目录下才能被正常加载，更建议使用上面的React Router方案。

内容的提问来源于stack exchange，提问作者skander Y