react-router-dom的NavLink点击路径更新但页面不跳转，刷新才生效如何解决

问题原因 #

该问题的核心是NavLink组件与Route、Switch组件没有被包裹在同一个Router实例的上下文中。点击NavLink时仅更新了外层Router的路径状态，包裹Switch的内层独立Router无法监听到路径变化，因此不会重新渲染匹配的组件，只有手动刷新页面时才会重新读取地址栏路径渲染对应页面。

解决方案 #

1. 调整Router包裹范围

将所有NavLink组件、Route、Switch统一放在同一个Router的包裹下，禁止只把Router套在Switch部分，正确结构示例如下：

<Router>
  {/* 导航栏区域（包含所有NavLink） */}
  <AdminNav style={{ margin: '0px', padding: '0px', marginTop: '160px' }}>
    <NavLink to="/adminboard/profile" activeClassName="active">
      <span>{faUserIcon}</span>
      <span>Profile</span>
    </NavLink>
    <NavLink to="/adminboard/postsanpham" activeClassName="active">
      <span>{postsanpham}</span>
      <span>Store</span>
    </NavLink>
    <NavLink to="/adminboard/store" activeClassName="active">
      <span>{faClipboardListIcon}</span>
      <span>Store</span>
    </NavLink>
    <NavLink to="/adminboard/settings" activeClassName="active">
      <span>{faToolboxIcon}</span>
      <span>Settings</span>
    </NavLink>
  </AdminNav>

  {/* 路由匹配区域 */}
  <Switch style={{ margin: '0px', padding: '0px' }}>
    <Route exact path="/adminboard/profile" component={AdminboardProfile} />
    <Route exact path="/adminboard/postsanpham" component={AdminPostSanPham} />
    <Route exact path="/adminboard/settings" component={AdminSetting} />
    <Route exact path="/adminboard/store" component={AdminStore} />
  </Switch>
</Router>

2. 排查多余Router实例

全局仅保留一个Router实例即可（通常是BrowserRouter或HashRouter），不要在子组件中额外嵌套Router，避免不同Router上下文的路径状态不同步。

3. react-router-dom v6版本兼容适配

如果你的项目依赖是v6版本，该版本已移除Switch、activeClassName、component等API，需要对应调整写法：

// 路由匹配部分v6写法
<Routes style={{ margin: '0px', padding: '0px' }}>
  <Route path="/adminboard/profile" element={<AdminboardProfile />} />
  <Route path="/adminboard/postsanpham" element={<AdminPostSanPham />} />
  <Route path="/adminboard/settings" element={<AdminSetting />} />
  <Route path="/adminboard/store" element={<AdminStore />} />
</Routes>

// NavLink v6写法
<NavLink 
  to="/adminboard/profile" 
  className={({isActive}) => isActive ? "active" : ""}
>
  <span>{faUserIcon}</span>
  <span>Profile</span>
</NavLink>

内容的提问来源于stack exchange，提问作者Thanh Hải