Obtengo un bucle infinito cuando trato de redirigir a los usuarios a la ruta deseada después del inicio de sesión obligatorio.
Mi ruta privada, cuando agrego state: { from: props.location }, obtengo un bucle infinito.
const PrivateRoute = ({ component: Component, exact, path, }: RouteProps): JSX.Element => { if (!Component) return <div />; const classes = useStyles(); const auth = useSelector((state: RootState) => state.auth); return ( <Route path={path} exact={exact} render={(props) => (auth.loading ? ( <Backdrop className={classes.backdrop} open> <CircularProgress color="inherit" /> </Backdrop> ) : auth.isAuthenticated ? ( <Component {...props} /> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location }, }} /> ))} /> ); };mi interruptor
<Router history={history}> <ThemeProvider theme={theme}> <CssBaseline /> <Alert th={ui.darkTheme} /> <UpdateApp /> <Route path="/login" exact component={Login} /> <Switch> <PrivateRoute path="/" exact component={Homepage} /> <PrivateRoute path="/info" exact component={Infos} /> <PrivateRoute path="/info/add" exact component={AddInfo} /> <PrivateRoute path="/info/:id" exact component={ShowInfo} /> <PrivateRoute path="/info/:id/edit" exact component={EditInfo} /> <PrivateRoute component={Four} /> </Switch> </ThemeProvider> </Router>Lo resolvió con la verificación de la ruta de acceso
const PrivateRoute = ({ component: Component, exact, path, }: RouteProps): JSX.Element => { if (!Component) return <div>ERROR</div>; const classes = useStyles(); const auth = useSelector((state: RootState) => state.auth); return ( <Route path={path} exact={exact} render={(props) => (auth.loading ? ( <Backdrop className={classes.backdrop} open> <CircularProgress color="inherit" /> </Backdrop> ) : auth.isAuthenticated ? ( <Component {...props} /> ) : (props.location.pathname !== '/login') && ( <Redirect to={{ pathname: '/login', state: { from: props.location }, }} /> ))} /> ); };