React Router & Navigation
React Router allows us to build Single Page Applications. Instead of sending requests to the server for new HTML pages, the router dynamically swaps components based on the URL.
BrowserRouter
The <BrowserRouter> component keeps your UI in sync with the browser's URL using the HTML5 History API. It must be at the highest level of your routing setup, usually wrapping your entire app.
Routes and Route
The <Routes> component (which replaced Switch in v6) looks through all its child <Route> elements and renders the one that best matches the current URL. You provide a path (like "/about") and an element (the React component).
Link vs a Tag
We never use an <a href="..."> tag for internal routing. It triggers a full page refresh, losing state! Instead, we use <Link to="..."> to intercept the click and update the URL seamlessly.
View Routing History (v5 vs v6)+
In React Router version 5, we used <Switch> instead of <Routes>. Switch rendered the FIRST route that matched, which meant order mattered significantly. Routes in v6 uses a smart ranking algorithm, finding the best exact match regardless of definition order. Also, Route components in v6 use the element prop instead of component or render props.