Как предотвратить бесконечное l oop, когда isAuthenticated не определен в React Router?

Question

Я получаю бесконечный рендер l oop, потому что значение isSignedIn изначально не определено. Как мне решить эту проблему?

Container.jsx

class Container extends Component {
  componentDidMount() {
    this.props.onFetchUserInit();
  }

  render() {
    const { path } = this.props.match;
    const isSignedIn = this.props.sessionData.signed_in;
    return (
      <Switch>
        <ProtectedRouteWrapper scope='employers'>
          <Route exact path={path}>
            <div>
              <HeaderContainer />
              <WelcomeContainer />
            </div>
          </Route>
        </ProtectedRouteWrapper>

        <Route path={`${path}/dashboard`}>
          <HeaderContainer />
          <EmployerDashboardContainer />
        </Route>

      </Switch>
    )
  }
}

const mapStateToProps = state => ({
  sessionData: state.session.userData
});

const mapDispatchToProps = dispatch => ({
  onFetchUserInit: () => dispatch(fetchUserInit()),

});

ProtectedRouteWrapper.jsx

const ProtectedRouteWrapper = ({ children, ...rest }) => {
  const isSignedIn = useSelector(state => state.session.userData.signed_in)

  return (
    <Route
      {...rest}
      render={({ location }) =>
          isSignedIn === true ? ( children ) : <LoginContainer />
      }
    />
  );
}

Answer 1

Вы можете добавить маршрут к компоненту LoginContainer и перенаправить на него пользователя в ProtectedRouteWrapper .

class Container extends Component {
  componentDidMount() {
    this.props.onFetchUserInit();
  }

  render() {
    const { path } = this.props.match;
    const isSignedIn = this.props.sessionData.signed_in;
    return (
      <Switch>
        <ProtectedRouteWrapper scope='employers'>
          <Route exact path={path}>
            <div>
              <HeaderContainer />
              <WelcomeContainer />
            </div>
          </Route>
        </ProtectedRouteWrapper>

        <Route path={`${path}/dashboard`}>
          <HeaderContainer />
          <EmployerDashboardContainer />
        </Route>

        <Route path={`/login`}>
          <LoginContainer />
        </Route>

      </Switch>
    )
  }
}

const mapStateToProps = state => ({
  sessionData: state.session.userData
});

const mapDispatchToProps = dispatch => ({
  onFetchUserInit: () => dispatch(fetchUserInit()),

});

Добавление перезагрузки:

const ProtectedRouteWrapper = ({ children, ...rest }) => {
  const isSignedIn = useSelector(state => state.session.userData.signed_in)

  return (
    <Route
      {...rest}
      render={({ location }) =>
          isSignedIn === true ? ( children ) :
          <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
      }
    />
  );
}