Tenía el siguiente fragmento de código mientras usaba react-router-dom v5 que me redirigía a iniciar sesión si el usuario no estaba autenticado y al resto de la aplicación si lo estaba:

 !isAuthenticated ? ( <> <Route path="/login" exact component={Login} /> <Redirect to="/login" /> </> ) : ( <div className="d-flex flex-column min-vh-100"> <main> <Container className="mt-4"> <Switch> <Route path="/" exact component={Home} /> <Route path="/collections" component={Collections} /> <Redirect to="/" /> </Switch> </Container> </main> </div> )}

Después de actualizar a react-router-dom v6, tuve que hacer una refactorización que terminó luciendo así:

 !isAuthenticated ? ( <> <Routes> <Route path="/login" element={<Login />} /> </Routes> <Navigate replace to="/login" /> </> ) : ( <div className="d-flex flex-column min-vh-100"> <main> <Container className="mt-4"> <Routes> <Route path="/" element={<Home />} /> <Route path="/collections" element={<Collections />} /> </Routes> <Navigate to="/" /> </Container> </main> </div> )}

Por lo que entiendo, <Navigate replace to="/login" /> es el equivalente de react-router-dom v6 de <Redirect to="/login" /> , pero en este momento mi código me pone en un bucle infinito. ¿Por qué está pasando esto?