为什么 React 路由器用户数据？<Home/> ： <导航到= "/login" /> 当用户数据仍然存在时呈现导航？

Question

我正在用React创建一个笔记应用程序，我使用React路由器进行导航。

我使用createBrowserRouter()来创建我的路由，下面是我的代码-

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;

当我转到localhost:3000/home时，无论userData是否存在，它都会重定向到登录页面。但是，如果我去除<Navigate/>成分，它可以正常工作。有人能解释一下原因吗?

谢谢!

Answer 1

我明白了。出现这个问题是因为加载userData的useEffect钩子在Router创建之后运行。我通过删除useEffect钩子并使用函数加载数据来修复它:

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)
const checkUser = ()=>{
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")
}

checkUser()
const loggedIn = userData !== null


const router = createBrowserRouter([

{
path: "/",
element: loggedIn ? <NoteList url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} /> : <Navigate to="/login"/>,
loader: null,
action: null,
errorElement: null
},
{
path: "/home",
element: loggedIn ? <NoteList url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} /> : <>{JSON.stringify(userData)}</>,//<Navigate to="/login"/>,
loader: null,
action: null,
errorElement: null
},
{
path: "/login",
element: <>You shouldn't be here</>,//loggedIn ? <Navigate replace to="/home" /> : <Login  url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} />,
loader: null,
action: null,
errorElement: null
},
{
path: "/sign-up",
element:  loggedIn ? <Navigate to="/home"/> : <Signup url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} />,
loader: null,
action: null,
errorElement: null
},
{
path: "/new-note",
element: loggedIn ? <Editor isNew={true} url={url} setUrl={setUrl} userInfo={userInfo} setUserInfo={setUserInfo} /> : <Navigate to="/login"/>,
loader: null,
action: null,
errorElement: null
},
{
path: "/editor/:noteId",
element: loggedIn ? <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;