React -如何在钩子内使用重定向useEffect?

Question

我试图重定向一个用户谁没有登录到我的应用程序的登录页面，我有一些条件内的useEffect是在我的路由文件，但当我输入其中一个重定向不工作，我想知道它是否与反应路由器-dom有关

Route.js文件代码如下:

import React, { useEffect } from 'react'; // nao estava
import { PropTypes } from 'prop-types';
import { Route, Redirect, useHistory } from 'react-router-dom';
import AuthLayout from '../pages/_layouts/auth';
import DefaultLayout from '../pages/_layouts/default';
import { store } from '../store';
export default function RouteWrapper({
component: Component,
isPrivate,
...rest
}) {
const { signed } = store.getState().auth;
const { googleSigned } = store.getState().googleAuth;
const history = useHistory();
useEffect(() => {
if (!signed && !googleSigned && isPrivate) {
return <Redirect to="/" />;
}
if ((signed && !isPrivate) || (googleSigned && !isPrivate)) {
return <Redirect to="/dashboard" />;
}
return <Redirect to="#" />;
}, [googleSigned, signed]);
const Layout =
signed || googleSigned || window.location.pathname === '/dashboard'
? DefaultLayout
: AuthLayout;
return (
<Route
{...rest}
render={(props) => (
<Layout>
<Component {...props} />
</Layout>
)}
/>
);
}
RouteWrapper.propTypes = {
isPrivate: PropTypes.bool,
component: PropTypes.oneOfType([PropTypes.element, PropTypes.func])
.isRequired,
};
RouteWrapper.defaultProps = {
isPrivate: false,
};

signed和googlesign是存在于reducer中的状态，焦点是google signed，因为使用正常登录获得的签名尚未实现，而google signed是在应用程序的后端使用oAuth实现的

我的应用程序流此刻如下用户单击登录按钮谷歌被重定向到谷歌身份验证屏幕,如果用户注册应用程序重定向到仪表板页面,仪表板页面和分派一个行动,检查用户是否登录到应用程序,目的是,如果用户没有登录(googleSigned = false)他是重定向回登录页面

Answer 1

您的实现存在一些问题。首先，在useEffect的返回不工作的方式，你似乎希望他们工作。useEffect中的返回实际上用于清除副作用，例如滚动侦听器或类似的组件卸载后不希望持续存在的副作用。您可以在这里阅读更多内容:https://reactjs.org/docs/hooks-effect.html.

你要做的是用编程方式重定向用户，而不是返回重定向组件。使用react-router-dom，您可以使用useHistory钩子(https://reactrouter.com/web/api/Hooks/usehistory)。因此，在你的useEffect钩子中，我们可以使用历史来代替返回<Redirect />组件。

useEffect(() => {
if (!signed && !googleSigned && isPrivate) {
history.push("/");
}
if ((signed && !isPrivate) || (googleSigned && !isPrivate)) {
history.push("/dashboard");
}
history.push("#");
}, [googleSigned, signed]);

像上面这样的东西应该更接近你想要达到的目标。

Answer 2

也许你想实现受保护路由模式?

保护路线