Question

我正在创建一个带有令牌身份验证的简单React Web应用程序。一切工作正常，但当我定义专用路由并验证用户身份时，不会返回专用路由。

App.js

const App = () => {

    return(
        <AuthState>
            <AlertState>
                <Router>
                    <Fragment>
                        <Alerts />
                        <Switch>
                            <Route path="/" exact={true} component={Login} />
                            <PrivateRoute exact path='/admin' component={Admin} />
                        </Switch>
                    </Fragment>
                </Router>
            </AlertState>
        </AuthState>
    );
};

这是我的privateRoute.js：

const PrivateRoute = ({ component: Component, ...rest }) => {

    const authContext = useContext(AuthContext);
    const { isAuthenticated } = authContext;

    // isAuthenticated is returning true at this point, but below is not returning my /admin 
    // path

    return (
        <Route {...rest} render={props => !isAuthenticated ? (
            <Redirect to='/' /> 
        ) : (
            <Component {...props} />
        )} />
    );
};

用户通过身份验证后，应自动调用/ admin路径，但没有任何反应。如果我已经登录，那么如果我手动输入url路径/ admin，那么我可以看到它的内容。

Answer 1

两个评论均正确。它不重定向您的原因是因为登录路由定义位于另一个定义之前。尽管PrivateRoute组件已更新（因为上下文已更新），但路径仍为“ /”，因此不会更改。登录到“ / admin”后，您必须手动导航。或者，您可以创建另一个包装Login组件的组件，该组件的行为与PrivateRoute相似，除非用户已登录，否则会将其路由到Login页面之外。

反应私有路由不重定向

1 个答案: