Reactjs 未经授权的页面限制需要刷新

我开始使用ReactJS，我想限制非授权用户的登录页面，并且我想将这些用户在登录后重定向到以前的页面（该部分也不起作用）

问题是，当我登录并返回到

/sign-in

页面时，它表明我仍然没有获得授权，即使我可以在本地存储中看到访问令牌（请看下图）。但是，如果我刷新页面，NotAuthorizeDurote会工作，它会将我重定向回主页

我如何在React中修复此问题？我怎样才能重定向回以前打开的页面，而不仅仅是

/

换句话说，

const isLoggedIn=localStorage.getItem（'access_token'）！=无效仅在页面刷新后激活。在angular中，我曾经通过
@Input
/
@Output
和EventEmitter来修复这些问题，但我对反应还不熟悉，我还不知道如何处理它

图片：

Login.js

import React，{Fragment，useState}来自'React'；
从'react router dom'导入{useHistory}；
从“../../Services/UserService”导入UserService；
进口{
制作风格，
排版，
集装箱，
TextField，
FormControlLabel，
复选框，
按钮
网格，
循环前进
}来自“@material ui/core”；
const useStyles=makeStyles（主题=>({
内容：{
背景色：theme.palete.background.paper，
填充：主题。间距（8,0,6）
},
表格：{
marginTop：主题。间距（1）
},
提交：{
边距：主题。间距（3,0,2）
}
}));
常量登录=（）=>{
const classes=useStyles（）；
const history=useHistory（）；
const[username，setUsername]=useState（“”）；
const[password，setPassword]=useState（“”）；
const[error，setError]=useState（“”）；
const[loading，setLoading]=useState（false）；
常量handleSubmit=（e）=>{
e、 预防默认值（）；
常量用户={
用户名，
密码，
};
设置加载（真）；
UserService.loginUser（用户）
。然后（res=>{
setItem（'access_token'，res.token）；
设置加载（假）；
历史推送（“/”）；
})
.catch（错误=>{
设置错误（错误消息）；
设置加载（假）；
});
}
返回(
登录
如果你没有注册，你应该注册。
{！UserService.isLoggedIn？
setUsername（e.target.value）}
错误={error！=''}
helperText={error}
/>
setPassword（e.target.value）}
/>
登录
:
登录。
}
{加载&&
}
);
}
导出默认登录；

App.js

import React，{Fragment}来自'React'；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Redirect}；
从“./Helpers/notauthorizedulote”导入notauthorizedulote；
从“./Components/Navbar/Navbar”导入导航栏；
从“./Components/Home/Home”导入Home；
从“./Components/User/User”导入用户；
从“./Components/Login/Login”导入登录名；
函数App（）{
返回(
);
}
导出默认应用程序；

Helpers/notauthorizedulote.js

从“React”导入React；
从“../Services/UserService”导入UserService；
从“react router dom”导入{Redirect，Route}；
常量NotAuthorizeDurote=（{component:component，…rest}）=>{
返回(
！UserService.isLoggedIn(
) : (
)
}
/>
)
}
导出默认NotAuthorizeDurote；

Service/UserService.js

const isLoggedIn=localStorage.getItem（'access_token'）！=无效的
常量登录用户=异步（用户）=>{
const{username，password}=user；
如果（用户名=='qwe'&密码=='123'）{
返回{token:'access_token'}；
}否则{
抛出新错误（“错误的用户名或密码”）；
}
}
导出默认值{isLoggedIn，loginUser}；

编辑：如果我放入
！localStorage.getItem（'access_token'）
而不是
！在
notauthorizedulote
中，它可以工作。为什么?
 在React中，组件仅在
道具
或
状态
更改时重新呈现。在
notauthorizedulote
中，您直接使用文件中的
isLoggedIn
param。相反，您应该将
isLoggedIn
作为来自父组件的道具传递。因此，您可以将
notauthorizedulote.js重新编写为：

从“React”导入React；
从“../Services/UserService”导入UserService；
从“react router dom”导入{Redirect，Route}；
const notauthorizedulote=（{component:component，isLoggedIn=false，…rest}）=>{
返回(
！UserService.isLoggedIn(
) : (
)
}
/>
)
}
导出默认NotAuthorizeDurote；

并将此组件称为


还是一样。如果我这样做了
！localStorage.getItem（'access_token'）
而不是
！在notauthorizedroote中，UserService.isLoggedIn
工作正常。为什么？