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

Question

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

路由

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

Auth((

export default function Auth() {
const {user} = useSelector((state) => state.user);
if (user) return [];
return [
<Route path={"/login"} exact component={Login} key={1} />,
<Route path={"/signup"} exact component={Register} key={2} />,
];
}

登录

useEffect(() => {
if (success) {
return history.push("/");
}
}, [success, dispatch, history]);

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

谢谢。

Answer 1

您的代码有很多不好的做法。

然而，如果我是你，我会把我的文件改成这样：

路由

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

Auth

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
)
}