反应私有路由不重定向答案

【问题标题】：React private route not redirecting反应私有路由不重定向
【发布时间】：2020-11-12 05:33:58
【问题描述】：

我正在创建一个带有令牌身份验证的简单 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，那么我可以看到它的内容。

【问题讨论】：

更改路线顺序
如果你 console.log(isAuthenticated) 有没有什么时候是假的？另外，Login 中是否有任何重定向，用于检查身份验证状态并在用户通过身份验证时重定向到 /admin？
我还没有在登录中进行验证
isAuthenticated on PrivateRoute.js 始终为真

标签： reactjs authentication react-router

【解决方案1】：

两个 cmets 都是正确的。它没有重定向您的原因是登录路由定义在另一个定义之前。虽然 PrivateRoute 组件更新了（因为上下文更新了），但是路径仍然是“/”，所以不会改变。登录到“/admin”后，您必须手动导航。或者您可以创建另一个包装 Login 组件的组件，其作用类似于 PrivateRoute，除非用户已登录，否则它将路由它们远离登录页面。

【讨论】：