Question

我有一条私有路由，如果本地存储中没有任何内容，它将重定向到Auth组件。目前，它没有考虑存储，因为当有本地存储数据时，如果没有本地存储数据，它将带我进入Auth页面。我正在应用程序中使用redux，但目前还没有使用，我想首先使用基本设置来使它工作。

我认为可能是我的组件没有时间重新加载并注册是否有存储项目。我可以看到它试图离开，但直接回到了Auth。有人可以帮忙吗？

我的私人路线：

export const ProtectedRoute = ({ component: Component, ...rest }: any) => {

    const dispatch = useDispatch();
    const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);


    useEffect(() => {

        const userData: any = localStorage.getItem('userData');

        if (!userData) {
            setIsAuthenticated(false);
        }

        setIsAuthenticated(true);



    }, [dispatch])


    return (

        <Route {...rest} render={(props: any) => 
            isAuthenticated ?
                <Component {...props} />
                : <Redirect to="/auth" />
        } />
    );
};

包含我的路线的组件：


export const Main = () => {

    return (
        <>
            <MainContainer className="MainContainer">
                <Switch location={location || background}>
                    <Route exact path="/">
                        <Home />
                    </Route>
                    <ProtectedRoute /*isAuthenticated={isAuthenticated}*/ component={Nativers} path="/nativers" exact />
                </Switch>
            </MainContainer>

        </>
     )
 }

当您单击“登录/注册”按钮时，auth组件功能可处理任何重定向：

    const authHandler = async () => {

        let action;
        if (isSignUp) {

            action = AuthActions.signup(
                formState.inputValues.name,
                formState.inputValues.email,
                formState.inputValues.password,
                formState.inputValues.repeatPassword
            )
        } else {
            action = AuthActions.login(
                formState.inputValues.email,
                formState.inputValues.password
            )
        }
        setError(null);
        setIsLoading(true);
        try {
            await dispatch(action);
            return <Redirect to="/nativers" />;
        } catch (err) {
            setError(err.message);
            setIsLoading(false); 
        }
    }

Answer 1

更新页面路径时，将调用匹配的Route组件以呈现已向其注册的任何组件。根据{{1}}数据的可用性，将逻辑重定向或不重定向的正确位置应该在localStorage组件内部，因为可以确保在呈现已注册组件之前执行该操作。 / p>

但是，在您的代码中，此逻辑位于Route组件之外，即使您尝试使用Route更新dispatch变量的值，更新也只会如果由于设置isAuthenticated钩子而重新渲染ProtectedRoute组件，则会发生这种情况。

有多种方法可以解决此问题，但是鉴于您已经拥有的东西，我认为最简单的方法是执行以下操作：

useEffect

现在，重定向或不重定向的逻辑存在于export const ProtectedRoute = ({ component: Component, ...rest }: any) => { return ( <Route {...rest} render={(props: any) => localStorage.getItem('userData') ? <Component {...props} /> : <Redirect to="/auth" /> } /> ); };组件中，因此，只要页面路径与Route组件的页面路径匹配，该逻辑就会被执行，并在需要时进行重定向

反应路由器专用路由不重定向

1 个答案: