React中NavLink失效排查：Bootstrap导航栏无报错但功能异常

核心问题及修复步骤： #

1. NavLink属性使用错误
   React Router v6中，NavLink的跳转属性是to而非原生的href，这是路由组件的专属属性，替换后才能触发单页面路由跳转。

2. 路由路径大小写不匹配
   App.js中Signup的路由路径是/Signup（大写S），但Navbar里的跳转路径是/signup（小写s），路由匹配区分大小写，需统一路径大小写。

3. Home.js代码错误
   你提供的Home.js代码完全复制了App.js的内容，这是无效的，Home组件应作为独立页面组件存在，无需重复路由配置。

修改后的代码示例： #

1. Navbar.js（替换href为to）

import React from "react";
import "bootstrap/dist/css/bootstrap.css";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <div>
      <nav className="navbar navbar-expand-lg bg-body-tertiary">
        <div className="container-fluid">
          <NavLink className="navbar-brand" to="/">Navbar</NavLink>
          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
              <li className="nav-item">
                <NavLink className="nav-link" to="/">Home</NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/about">About</NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/contact">Contact</NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/login">Login</NavLink>
              </li>
              <li className="nav-item">
                <NavLink className="nav-link" to="/signup">Register</NavLink>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

2. App.js（统一路径大小写）

import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Contact from "./components/Contact";
import About from "./components/About";
import Login from "./components/Login";
import Signup from "./components/Signup";

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/login" element={<Login />} />
        <Route path="/signup" element={<Signup />} />
      </Routes>
    </>
  );
};

export default App;

3. Home.js（修正为独立页面组件）

import React from "react";

const Home = () => {
  return (
    <div className="container mt-4">
      <h1>Home Page</h1>
      <p>欢迎访问首页</p>
    </div>
  );
};

export default Home;

额外检查： #

确保项目根组件（index.js）已用BrowserRouter包裹，这是React Router生效的前提：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

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

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