React Router中userData存在时仍触发Navigate重定向的原因

我用React开发笔记应用，采用React Router的createBrowserRouter()配置路由。给/home路由设置了userData ? <NoteList /> : <Navigate to="/login" />的条件渲染逻辑，但无论userData是否存在，访问localhost:3000/home都会重定向到登录页；移除<Navigate/>组件后功能恢复正常，请求解析该问题原因。

相关代码如下：

import './App.css';
import NoteList from "./components/NoteList"
import Editor from "./components/Editor"
import Login from "./components/Login"
import React from 'react'
import Signup from './components/SignUp';
import SignUpDone from './components/SignUpDone';
import Test from './components/test';

import { editorLoader } from './components/Editor';

import { createBrowserRouter, Navigate, RouterProvider} from 'react-router-dom';//


//Redux Imports

import { useSelector, useDispatch } from 'react-redux';
import { getUserData, createUserData } from "./app/userData"



function App() {
  let [userInfo, setUserInfo] = React.useState({})
  let [url, setUrl] = React.useState("http://192.168.43.227:8000")

  const dispatch = useDispatch()

  const userData = useSelector(getUserData)

  React.useEffect(()=>{
    if (localStorage.getItem("user-data") !== null && userData === null){
      const parsedData = JSON.parse(localStorage.getItem("user-data"))
      dispatch(createUserData(parsedData))
      console.log("The userData was populated with data from the local Storage")
    }

    localStorage.setItem("main-url", url)
    console.log(localStorage.getItem("user-data"), "This was printed from the App page")
  },[])
  

  
  const router = createBrowserRouter([
      
        {
          path: "/",
          element: userData ? <NoteList url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} /> : <Navigate to="/login"/>,
          loader: null,
          action: null,
          errorElement: null
        },
        {
          path: "/home",
          element: userData ? <NoteList url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} /> : <>{JSON.stringify(userData)}</>,//<Navigate to="/login"/>,
          loader: null,
          action: null,
          errorElement: null
        },
        {
          path: "/login",
          element: userData ? <Navigate replace to="/home" /> : <Login  url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} />,
          loader: null,
          action: null,
          errorElement: null
        },
        {
          path: "/sign-up",
          element:  userData ? <Navigate to="/home"/> : <Signup url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} />,
          loader: null,
          action: null,
          errorElement: null
        },
        {
          path: "/new-note",
          element: userData ? <Editor isNew={true} url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} /> : <Navigate to="/login"/>,
          loader: null,
          action: null,
          errorElement: null
        },
        {
          path: "/editor/:noteId",
          element: userData ? <Editor isNew={false} url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} /> : <Navigate to="/login"/>,
          loader: editorLoader,
          action: null,
          errorElement: null
        },
        {
          path: "/sign-up-success",
          element: <SignUpDone url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo}  />,
          loader: null,
          action: null,
          errorElement: null
        },
        {
          path: "/test",
          element: <Test />,
          loader: null,
          action: null,
          errorElement: null
        },
        {
          path: "/error-testing/:source",
          element: <>This is the Testing of the Error Element</>,
          loader: ({params})=>{
            const getData = params['source']
            console.log("This error was generated from ", getData)
            return null
          }
        }
  ])
  
  return (
    <RouterProvider router={router}/>
  );
}

export default App;

问题原因分析 #

1. 路由实例未随状态更新
   createBrowserRouter在App组件每次渲染时都会重新创建，但组件首次渲染时userData初始值为null，此时生成的路由配置中/home的element是<Navigate to="/login"/>。后续useEffect从localStorage加载数据并更新Redux状态后，App组件会重新渲染并生成新的路由实例，但<RouterProvider>已经使用第一次的路由实例完成初始化，不会自动切换到新的路由配置，导致页面始终按照初始的重定向逻辑执行。

2. 依赖数组缺失导致状态同步滞后
   useEffect的依赖数组为空，不会在userData变化时重新执行，但更核心的问题是路由创建没有依赖userData等状态变量，状态更新无法触发路由配置的更新，使得后续的状态变化无法反映到路由规则中。

解决方案 #

1. 用useMemo缓存路由实例
   将路由创建逻辑包裹在useMemo中，添加userData、url、userInfo等所有路由配置依赖的变量作为依赖项，这样只有当依赖变化时才会重新创建路由实例，确保<RouterProvider>能获取到最新的路由配置：

const router = React.useMemo(() => createBrowserRouter([
  // 原路由配置数组
]), [userData, url, userInfo]);

2. 优化Redux状态初始化逻辑
   可以在Redux的slice初始化时直接从localStorage读取数据，避免依赖组件的useEffect延迟加载，减少初始渲染时userData为null的情况，例如在userData的slice中：

const initialState = {
  data: localStorage.getItem("user-data") ? JSON.parse(localStorage.getItem("user-data")) : null
};

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