首页 > 解决方案 > 经过身份验证的 React 路由重定向到 /

问题描述

我有一个我无法弄清楚的反应路由问题。除了我的登录页面,我已经验证了通往所有内容的路由。身份验证工作正常,单击按钮和链接时我可以在页面中导航,但是当我直接输入指向 URL 的路由时,我被重定向到 localhost:3000/ 。我知道为什么会发生这种情况,我只是想不出解决办法。以下是所有相关代码。主要问题是登录组件中的 useEffect 钩子重定向到 / 。

当我输入类似 localhost:3000/user 的 url 时,我被发送到 localhost:3000/

我能做些什么呢?

PrivateRoute.js

const PrivateRoute = ({ component: Component, ...rest }) => {
  const authContext = useContext(AuthContext);
  const { isAuthenticated } = authContext;

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

登录.js

const Login = props => {
    useEffect(() => {
    if (isAuthenticated) {
      props.history.push('/');
    }
    }, [error, onLoad, isAuthenticated, props.history]);

    useEffect(() => {
      onLoad();
    }, [error, onLoad, isAuthenticated, props.history]);
}

标签: reactjsroutingreact-routeruse-effect

解决方案


推荐阅读