React用react-router-dom和react-bootstrap时导航链接失效怎么办

你的导航点击不跳转是4个核心写法错误导致的，按下面的步骤改完就能正常运行： #

核心错误点 #

1. App.js路由导入和容器错误：你写的import { BrowserRouter as Route, Switch,} from "react-router-dom";是把BrowserRouter重命名成了Route，根本没导入真正负责路由匹配的Route组件，同时整个应用没有全局统一的路由容器，路由规则完全不生效。另外你在Switch标签外硬写了一个<Home />组件，会导致不管跳转到哪个页面，Home内容都会固定显示。
2. 重复嵌套Router导致上下文隔离：react-router-dom要求整个应用的路由组件必须在同一个Router上下文里才能正常通信，你在Navbar组件里单独包了一层<Router>，和外层路由环境完全断开，点击链接自然不会触发外层的路由匹配。
3. 导航组件属性传错：你给as={Link}的导航项传的是href、单节点activeKey属性，但react-router-dom的Link组件识别的跳转属性是to，activeKey是外层<Nav>组件的属性，不是单个导航项的属性，传错属性既不会触发跳转，也不会正确高亮当前页面。另外Navbar.Brand直接用href会触发整页刷新，不符合单页应用的路由跳转逻辑。
4. 样式属性写法错误：Navbar上写的bg=".bg-transparent"多了类名前缀的点，react-bootstrap的bg属性直接传transparent即可生效。

第一步：修改App.js #

// 修正导入：正确引入Router、Route、Switch
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Pages/homepage/Home";
import Reviews from "./Pages/Reviews";
import Community from "./Pages/Community";
import Login from "./Pages/login/Login";
import Navbarbefore from "./Navbar/Navbarbefore";
import Footer from "./footer/footer-main";

import './App.css';

function App() {
  return (
    // 整个应用套在同一个Router容器下
    <Router>
      <div className="App">
        <Navbarbefore />
        {/* 删除Switch外硬编码的<Home />，避免所有页面重复显示Home内容 */}
        <div>
          <Switch>
            {/* 根路径精确匹配到首页 */}
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/home">
              <Home />
            </Route>
            <Route path="/reviews">
              <Reviews />
            </Route>
            <Route path="/community">
              <Community />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
          </Switch>
        </div>
        <Footer />
      </div>
    </Router>
  );
}
export default App;

第二步：修改Navbarbefore.js #

import React, { Component } from "react";
import { Navbar, Container, Nav } from "react-bootstrap";
// 删除Navbar内部的Router导入，全局Router已经在App.js外层定义
import { Link, withRouter } from "react-router-dom";

import icon from "../Icons/Icon.png";
import filtericon from "../Icons/Filtericon.png";
import logo from "../logo/Logo.png";
import button from "../images/login-btn.png";
import SearchBar from "./Search";
import "./navbar.css";

// 用withRouter包裹组件，获取当前路由路径实现导航高亮
class Navbarbefore extends Component {
  render() {
    const currentPath = this.props.location.pathname;
    return (
      // 删除组件内部嵌套的<Router>标签
      <div className="nav-container">
        <Navbar
          collapseOnSelect
          expand="lg"
          bg="transparent"
          variant="dark"
          className="gap-3 px-3"
        >
          <Container>
            {/* Brand改用Link组件，通过to属性跳转，避免整页刷新 */}
            <Navbar.Brand as={Link} to="/">
              <img className="main-logo" src={logo} alt="logo" />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="navbarScroll" />
            <Navbar.Collapse id="navbarScroll">
              {/* activeKey绑定到外层Nav组件，自动匹配当前页高亮 */}
              <Nav activeKey={currentPath} className="me-auto flex-grow-1">
                <div className="ml-70">
                  <SearchBar />
                </div>
                {/* 所有导航项统一用to属性传跳转路径，删除错误的href、单节点activeKey */}
                <Nav.Link as={Link} to="/home">
                  <img
                    className="filter"
                    src={filtericon}
                    alt="filter"
                  />
                </Nav.Link>
                <Nav.Link as={Link} to="/reviews">
                  <div className="mr-60 ml-74 review"> Review </div>
                </Nav.Link>
                <Nav.Link as={Link} to="/community">
                  <div className="mr-74 community">Community</div>
                </Nav.Link>
                <Nav.Link>
                  <img
                    className="ml-74 notification"
                    src={icon}
                    alt="notification-bell"
                  />
                </Nav.Link>
              </Nav>
              <Nav activeKey={currentPath}>
                <Nav.Link as={Link} to="/login">
                  <img className="ml-74" src={button} alt="log in button" />
                </Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      </div>
    );
  }
}
// 导出时用withRouter包裹，才能拿到路由上下文信息
export default withRouter(Navbarbefore);

改完后整个应用只有App.js外层一个Router实例，所有导航和路由规则在同一个上下文里，点击就能正常跳转，对应导航项也会自动高亮。

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