React Router v5路由异常：点击链接URL变更但组件未切换问题排查

这种情况在React Router v5里挺常见的，我之前也碰到过。结合你的代码来看，大概率是导航链接的使用方式或者组件导入的问题，给你几个针对性的解决方案：

1. 用NavLink代替普通Link管理激活状态 #

你现在在Menu组件里给普通Link手动加了active类，但React Router的Link并不负责处理激活状态的切换，反而可能因为手动添加的类干扰了路由的点击事件处理。换成专门的NavLink就可以解决这个问题：

修改Menu组件的代码：

import { NavLink } from 'react-router-dom'; // 先确保导入NavLink

export default function Menu() {
  return (
    <nav className='navbar navbar-expand-md navbar-light bg-light'>
      <div className='container-fluid'>
        <NavLink to='/' className='navbar-brand'>
          React movies
        </NavLink>
        <div className='collapse navbar-collapse'>
          <ul className='navbar-nav me-auto mb-2 mb-lg-0'>
            <li className='nav-item'>
              {/* 通过NavLink的isActive回调自动控制active类 */}
              <NavLink 
                to='/genres' 
                className={({ isActive }) => 
                  isActive ? 'nav-link active' : 'nav-link'
                }
              >
                genres
              </NavLink>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

2. 检查路由组件的导入是否正确 #

一定要确保所有路由相关的组件（BrowserRouter、Switch、Route、NavLink）都是从react-router-dom导入的，不要错导入react-router或者其他库：

// 正确的导入方式
import { BrowserRouter, Switch, Route, NavLink } from 'react-router-dom';

3. 确保只有一个BrowserRouter实例 #

整个应用只能有一个BrowserRouter来包裹所有路由相关的组件，不要在Menu或者其他子组件里再嵌套BrowserRouter，否则会导致路由上下文冲突，客户端导航无法正常触发组件切换。

为什么会出现这个问题？ #

直接在地址栏输入URL能正常显示，说明你的路由配置本身是没问题的。问题出在客户端导航的事件处理上：普通Link手动加active类可能干扰了React Router的默认点击事件，或者组件导入错误导致路由上下文没有正确传递，使得React Router无法检测到路由变化，也就不会切换组件。

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