如何解决如何在React App路由中处理条件重定向?
我正在为我的React项目使用metronic theme
,现在我正在尝试根据api的值进行条件重定向。我发现一个名为Routes.js
的文件已经被写入,我正在尝试在那里进行更改。看起来就是这样
const [request,setRequest] = useState();
const [isUserActive,setIsUserActive] = useState(false);
useEffect(() => {
fetch("http://82 ...")
.then((res) => res.json())
.then((data) => setRequest(data));
},[]);
useEffect(() => {
if (request) {
request.isUser=== true
? setIsUserActive(true)
: setIsUserActive(false);
}
},[request]);
return (
<Switch>
<Route path="/error" component={ErrorsPage} />
{!isUserActive ? (
<Redirect to="error/error-v1" />
) : (
<>
<Redirect to="/" />
<Layout>
<BasePage />
</Layout>
</>
)}
</Switch>
);
当isUserActive
为true
时,我想转到root
的路径,但如果不是,我想转到error page
。 isUserActive
现在开始记录
false
false
true
但是即使最终值是/error/error-v1
,我的项目也始终重定向到true
,我在这里丢失了吗?
解决方法
您可能想添加其他状态进行加载。原因是在当前设置下,一旦代码将您定向到/ error端点,就没有回头路了,它将始终呈现错误页面。
const [request,setRequest] = useState();
// vvv this was added vvv
// vvv this was added vvv
// vvv this was added vvv
const [requestLoading,setRequestLoading] = useState(true);
const [isUserActive,setIsUserActive] = useState(false);
useEffect(() => {
fetch("http://82 ...")
.then((res) => res.json())
.then((data) => setRequest(data));
},[]);
useEffect(() => {
if (request) {
// vvv this was added vvv
// vvv this was added vvv
// vvv this was added vvv
setRequestLoading(false);
request.isUser=== true
? setIsUserActive(true)
: setIsUserActive(false);
}
},[request]);
return (
// vvv this conditional rendering was added vvv
// vvv this conditional rendering was added vvv
// vvv this conditional rendering was added vvv
{!requestLoading ? <Switch>
<Route path="/error" component={ErrorsPage} />
{!isUserActive ? (
<Redirect to="error/error-v1" />
) : (
<>
<Redirect to="/" />
<Layout>
<BasePage />
</Layout>
</>
)}
</Switch> : <div />}
);
目前,如果请求仍在加载,所有这些操作将呈现一个div,然后在完成后根据结果将您路由
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。