I got a use case wherein the customer must go to the login screen on Browser refresh. example:
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>
);
};
If I try to refresh it goes to the proper route but I don't want this behavior it should go to the login screen on refresh.
How to achieve it using react router dom v6
I suggest moving the Router up the ReactTree and use a mounting useEffect hook to issue an imperative redirect when the App component mounts.
Example:
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>
);
};