Obtuve un caso de uso en el que el cliente debe ir a la pantalla de inicio de sesión en la actualización del navegador. ejemplo:
import "./styles.css"; import { Route, Routes, BrowserRouter as Router, Outlet, Link } from "react-router-dom"; import { useEffect, useLayoutEffect,StrictMode } from "react"; import { createRoot } from "react-dom/client"; root.render( <StrictMode> <App /> </StrictMode> ); export default function App() { return <Main />; } const Main = () => { return ( <Router> <Routes> <Route path="/" element={<LayoutMain />}> <Route path="/" element={<div>Home</div>} /> <Route path="/login" element={<div>Login</div>} /> <Route path="/register" element={<div>Regster</div>} /> </Route> <Route path="/inner" element={<InnerLayout />}> <Route path="/inner/" element={<div>Home Inner</div>} /> <Route path="/inner/login" element={<div>LoginInner</div>} /> <Route path="/inner/register" element={<div>RegsterInner</div>} /> </Route> </Routes> </Router> ); }; const LayoutMain = () => { return ( <div> Main Header <Link to="">Home</Link> <Link to="login">Login</Link> <Link to="register">Register</Link> <Link to="inner">inner</Link> <div> <Outlet /> </div> </div> ); }; const InnerLayout = () => { useEffect(() => { console.log(1); }, []); return ( <div> Inner Header <Link to="">HomeI </Link> <Link to="/inner/login">LoginI </Link> <Link to="/inner/register">RegisterI </Link> <div> <Outlet /> </div> </div> ); };Si trato de actualizar, va a la ruta adecuada, pero no quiero este comportamiento, debería ir a la pantalla de inicio de sesión al actualizar.
Cómo lograrlo usando reaccionar enrutador dom v6
Sugiero mover el Router hacia arriba en ReactTree y usar un useEffect de montaje para emitir una redirección imperativa cuando se monta el componente de la App .
Ejemplo:
import "./styles.css"; import { Route, Routes, BrowserRouter as Router, Outlet, Link, useNavigate, } from "react-router-dom"; import { useEffect, useLayoutEffect, StrictMode } from "react"; import { createRoot } from "react-dom/client"; root.render( <StrictMode> <Router> <App /> </Router> </StrictMode> );...
export default function App() { const navigate = useNavigate(); useEffect(() => { navigate("/login", { replace: true }); }, []); return <Main />; }...
const Main = () => { return ( <Routes> <Route path="/" element={<LayoutMain />}> <Route path="/" element={<div>Home</div>} /> <Route path="/login" element={<div>Login</div>} /> <Route path="/register" element={<div>Regster</div>} /> </Route> <Route path="/inner" element={<InnerLayout />}> <Route path="/inner/" element={<div>Home Inner</div>} /> <Route path="/inner/login" element={<div>LoginInner</div>} /> <Route path="/inner/register" element={<div>RegsterInner</div>} /> </Route> </Routes> ); };