如何在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，然后在完成后根据结果将您路由