重定向导致无限循环

时间:2018-12-25 10:59:40

标签: reactjs routing react-redux react-router

我在应用程序中遇到路由问题,最后找到了问题根源。 这是我的路由器定义

const PublicRoutes = ({history, isLoggedIn}) => {
  console.log("RENDERING ROUTES");
  return (
    <Switch>
      <Route exact path={'/404'} component={asyncComponent({resolve: () => import('app/modules/404/404')})}/>
      <Route exact path={'/500'} component={asyncComponent({resolve: () => import('app/modules/500/500')})}/>
      <Route exact path={'/login'} component={asyncComponent({resolve: () => import('app/modules/login/page/LoginPage.tsx')})}/>
      <RestrictedRoute path="/dashboard" component={asyncComponent({resolve: () => import('app/modules/dashboard/page/Dashboard')})} isLoggedIn={isLoggedIn}/>
      <Redirect
        exact
        from="/"
        to="/login"
      />
    </Switch>
  );
};
const mapStateToProps = ({authentication}: IRootState) => ({
  isLoggedIn: authentication.isAuthenticated
});

export default connect(mapStateToProps, null, null, {pure: false})(PublicRoutes);

当我访问根域URL localhost:3333/时,我被重定向到login路由,但是出现空白页,并且控制台出现错误。

RENDERING ROUTES
VM56:37 Warning: You tried to redirect to the same route you're currently on: "/login"
window.console.error @ VM56:37
routes.tsx:9 RENDERING ROUTES
VM56:37 Warning: You tried to redirect to the same route you're currently on: "/login"
window.console.error @ VM56:37
routes.tsx:9 RENDERING ROUTES
VM56:37 Warning: You tried to redirect to the same route you're currently on: "/login"

我得到五个这样的错误。

我正在按以下方式使用PublicRoutes

  render() {
    const {notifications} = this.props;
    return (
      <div className="app-container">
        <LoadingBar showFastActions={false} updateTime={50} style={{backgroundColor: '#009cd8', height: '4px', zIndex: 999999}}/>
        <Notifications notifications={notifications} style={notificationsStyle}/>
        <ToastContainer
          position={toast.POSITION.TOP_LEFT as ToastPosition}
          className="toastify-container"
          toastClassName="toastify-toast"
        />
        <DashAppHolder>
          <PublicRoutes history={history}/>
        </DashAppHolder>
      </div>
    );
  }

我的代码有什么问题,为什么要多次渲染路线?

谢谢

0 个答案:

没有答案