React Router跳转时URL更新但路由不渲染，手动刷新才生效如何解决？

问题根因 #

登录操作完成后，token仅写入了本地存储，App组件没有感知到token的变化，不会触发重新渲染，此时页面仍然挂载公共路由组件。公共路由的Switch规则中没有匹配/dashboard路径的项，因此返回空白内容。
手动刷新页面时，App组件重新初始化，会从本地存储读取到最新的token值，才会渲染认证后的DashboardLayout组件，对应路由规则生效，页面正常显示。

解决方案 #

1. 首先将App组件中的token设置为响应式状态，初始化时从本地存储读取：

// App.js中新增
import { useState, useEffect } from 'react'

const App = () => {
  const [token, setToken] = useState(localStorage.getItem('accessToken'))
  // 剩余原有逻辑
}

2. 登录成功后，除了写入本地存储，还需要通知App组件更新token状态。如果没有引入Redux、Mobx等全局状态管理工具，可以用自定义事件实现通信：

// Login组件登录成功逻辑中新增
localStorage.setItem('accessToken', 实际获取的token值)
window.dispatchEvent(new CustomEvent('authStateChange'))

3. 在App组件中监听自定义事件，同步更新token状态：

// App.js中新增useEffect逻辑
useEffect(() => {
  const syncAuthState = () => {
    setToken(localStorage.getItem('accessToken'))
  }
  window.addEventListener('authStateChange', syncAuthState)
  return () => window.removeEventListener('authStateChange', syncAuthState)
}, [])

优化建议 #

可以在公共路由中新增重定向规则，已登录用户访问公共路由路径时直接跳转到仪表盘，避免重复登录：

// PublicRoutes的Switch中新增
<Redirect from="/login" to="/dashboard" />

如果使用React Router v6，替换为<Navigate>组件实现重定向即可。

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