React Router v6导航栏无法跳转组件，如何监听路由变化？

你的代码存在几个关键问题导致导航无法正常工作，以下是修复方案：

核心问题分析 #

1. Navbar不在BrowserRouter范围内：使用Link组件的组件必须包裹在BrowserRouter内部，否则无法获取路由上下文，点击链接不会触发路由变化。
2. 路径大小写不匹配：路由配置的path="gallary"是小写，而Link的to="/Gallary"是大写开头，React Router的路径是区分大小写的，导致无法匹配。
3. 额外渲染Gallary组件：在Routes外直接渲染<Gallary />会导致该组件始终显示，不符合路由按需渲染的预期。
4. Navbar中的属性拼写错误：classNameName应为className，否则样式无法生效。

修正后的代码 #

App.js #

import React from "react";
import Navbar from "./Component/Navbar";
import Gallary from "./Component/Gallary";
import { BrowserRouter, Routes, Route } from "react-router-dom";

export const App = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <div>
        <Routes>
          <Route path="/gallary" element={<Gallary />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
};

export default App;

Navbar.jsx #

import { Link } from "react-router-dom";

export const Navbar = () => {
  return (
    <div className="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
      <div className="relative flex grid items-center grid-cols-2 lg:grid-cols-3">
        <ul className="flex items-center hidden space-x-8 lg:flex">
          <li>
            <Link
              to="/gallary"
              aria-label="Photo Gallary"
              title="Photo Gallary"
              className="font-medium tracking-wide text-white-700 transition-colors duration-200 hover:text-deep-purple-accent-400"
            >
              Photo Gallary
            </Link>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default Navbar;

关键改动说明 #

• 将Navbar移至BrowserRouter内部，确保它能访问路由上下文。
• 统一路径为/gallary（小写，带前导斜杠的绝对路径），保证Link和Route的路径完全匹配。
• 移除Routes外的<Gallary />，让组件仅在匹配路由时渲染。
• 修正classNameName为className，修复样式绑定问题。

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