Javascript 登录后重定向到主页与删除登录用户的受保护路由冲突|反应

我已实施react路由器，以保护（隐藏）登录用户的登录和注册等路由，但这会导致登录后重定向到主页时出现问题，在代码到达应推送主页的位置之前，页面（路由）会从路由中移除，最终导致登录时出现空白页面，并且不会发生重定向

路线

        <Switch>
          {Auth()}
          <Route exact path="/" component={Home} key={3} />
        </Switch>

const user = useSelector((state) => state.auth.user);
   return(
       <Switch>
          {user && <Auth />}
          <Route exact path="/" component={Home} key={3} />
        </Switch>
)

在这里，我不能保证在从堆栈中删除路由之前运行此代码

---

谢谢。

您的代码有很多错误做法

但是，如果我是你，我会将我的文件更改为以下内容：

路线

        <Switch>
          {Auth()}
          <Route exact path="/" component={Home} key={3} />
        </Switch>

const user = useSelector((state) => state.auth.user);
   return(
       <Switch>
          {user && <Auth />}
          <Route exact path="/" component={Home} key={3} />
        </Switch>
)

const user=useSelector（（state）=>state.auth.user）；
返回(
{用户&&}
)

认证

导出默认函数Auth（）{
返回(
,
,
);
}

登录

if（登录成功）{
返回(
)
}否则{
返回(
//登录表单的实现
)
}

不要使用

历史记录。从react router在
中按
。因此，登录后，您的登录/注册路由将被卸载，当前路由将返回到您的
为什么返回历史记录。push（）？您能告诉我您看到了哪些不良做法吗？因此，当您在路由中使用密钥时，我假设您使用的是react router 3或更早版本，因此它应该是一个旧代码！但是我修改了你的代码，使它在语义上更好。不返回数组或在
jsx
中使用函数而不是将其声明为组件就是其中之一。但让我们关注您的代码！你能让它工作吗？
export default function Auth() {
  return (
    <Route path={"/login"} exact component={Login} key={1} />,
    <Route path={"/signup"} exact component={Register} key={2} />,
  );
}

if (loginSuccess){
     return (
         <Redirect to="/" />
     )
}else{
    return (
         //implementation of  login form
    )
}