React: Routing - Lazy Loading and Protected routes
The standard library used: react-router-dom BASIC ROUTING 4 things needed A routing configuration A place to load the routes output <Outlet /> An initial element where all this can go <App /> A navbar main.jsx -> routes -> App -> Navbar + Outlet Step 1: Routes.jsx import { Routes, Route } from "react-router-dom"; import App from "./App"; export default function GlobalRoutes() { return ( <Routes> <Route path="/" element={<App />}> <Route index path="/" element= { <Home/> } /> <Route path="/products" element= { <Products /> } /> <Route path="/profile" element= { <Profile /> } /> <Route path="*" element= { <Home/> } /> </Route> </Routes> ) } Step 2: main.jsx import { BrowserRouter } from 'react-router-dom'createRoot(document.getElementById('root')).render( ...