# React Router v7 🧭 So far, we've been building [React](/courses/reactjs) applications where everything exists on one screen. That's fine for smaller examples, but real applications usually have different pages or sections. A website might have: ```text Home About Products Contact Login Dashboard Profile Settings ``` Each section should usually have its own URL. For example: ```text / ``` could show the home page. ```text /about ``` could show the about page. ```text /products ``` could show products. And: ```text /products/42 ``` could show one particular product. The question is: > How does [React](/courses/reactjs) know which component to display for each URL? That's where **[React Router](/courses/reactjs)** comes in. 🧭 --- # What Is React Router? React itself doesn't include a complete routing system. React knows how to build components and render interfaces, but it doesn't automatically know that: ```text /about ``` should display: ```jsx ``` or that: ```text /contact ``` should display: ```jsx ``` [React Router](/courses/reactjs) gives us tools for connecting **URLs to React components**. You can think of routing like this: ```text URL ↓ React Router checks the route ↓ Finds the matching component ↓ React displays that component ``` For example: ```text / ↓ ``` ```text /about ↓ ``` ```text /contact ↓ ``` That's the basic idea. --- # Why Use Client-Side Routing? On a traditional website, clicking a link may ask the server for an entirely new [HTML](/courses/html) document. The browser leaves the current page, requests another document, and loads it. React applications can instead use **client-side routing**. After the application has loaded, navigation between routes can update the browser URL and render different React components without requesting a completely new [HTML](/courses/html) document for every internal navigation. So instead of: ```text Click About ↓ Load completely new HTML page ↓ Browser rebuilds page ``` we can have: ```text Click About ↓ React Router changes URL ↓ Matching React UI renders ``` The result usually feels much smoother. That's one of the ideas behind a **Single Page Application**, or SPA. And no, "Single Page Application" doesn't mean your entire website has one gigantic page where users scroll until retirement. 😂 It means the browser can load one main application document and React manages many UI views inside it. --- # React Router v7 Has Three Modes This is worth understanding because React Router v7 is not limited to one setup style. React Router v7 can be used in three main ways: ```text Declarative Mode Data Mode Framework Mode ``` They build on each other. ### Declarative Mode Declarative Mode gives you the traditional React Router experience: ```jsx ``` It gives you routing, links, navigation [hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback), URL parameters, nested routes, and similar basics. This is what we'll primarily use in this chapter because you're learning React itself and this style makes the routing concepts very easy to see. ### Data Mode Data Mode uses APIs such as: ```jsx createBrowserRouter() ``` and: ```jsx ``` It adds features such as route loaders, actions, pending navigation state, and fetchers. This is a strong choice when you're building a larger SPA but still want to control the [rest](/courses/expressjs) of your project's architecture yourself. ### Framework Mode Framework Mode goes further and turns React Router into more of a complete application framework. It can provide route modules, automatic code splitting, loaders, actions, server-side rendering, static rendering, and other features. For a brand-new production application, especially one that needs more than basic client-side routing, **Framework Mode is worth serious consideration**. But learning all of that before you understand what a route even is would be slightly ambitious. 😭 So we'll first learn routing with **Declarative Mode**. Once the fundamentals make sense, Data Mode and Framework Mode become much easier to understand. --- # Installing React Router v7 For a project intentionally using React Router v7, install: ```bash npm install react-router@7 ``` Notice that we're using: ```text react-router ``` rather than: ```text react-router-dom ``` In React Router v7, the main APIs were consolidated into the `react-router` package. You may still see older tutorials using: ```bash npm install react-router-dom ``` and imports such as: ```jsx import { Link } from "react-router-dom" ``` That syntax was extremely common in React Router v6. The `react-router-dom` package remained available in v7 mainly to make migration easier, but for new v7 code we can import the main APIs directly from: ```jsx "react-router" ``` This is important because otherwise you'll spend twenty minutes wondering why one tutorial says one package and another tutorial says something completely different. Welcome to [JavaScript](/courses/javascript) ecosystem archaeology. 🏺 --- # Basic Setup With `BrowserRouter` Let's imagine we're using a normal Vite React project. Your `main.jsx` may start something like this: ```jsx import { StrictMode } from "react" import { createRoot } from "react-dom/client" import App from "./App.jsx" createRoot( document.getElementById("root") ).render( ) ``` To enable React Router, we'll wrap our application in: ```jsx ``` First import it: ```jsx import { BrowserRouter } from "react-router" ``` Then: ```jsx import { StrictMode } from "react" import { createRoot } from "react-dom/client" import { BrowserRouter } from "react-router" import App from "./App.jsx" createRoot( document.getElementById("root") ).render( ) ``` Now components inside `App` can use React Router's routing features. --- # What Does `BrowserRouter` Actually Do? `BrowserRouter` connects React Router to the browser's URL and History API. That allows React Router to understand URLs such as: ```text / /about /contact /products/5 ``` and respond when navigation happens. You can think of: ```jsx ``` as saying: > "React Router, please manage browser navigation for everything inside this application." Without a router around your components, [hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) such as: ```jsx useNavigate() useParams() useSearchParams() ``` won't have the routing context they need. --- # Creating Pages Let's create a few simple page components. For example: ```jsx function Home() { return (

Home

Welcome to our website.

) } ``` Then: ```jsx function About() { return (

About

Learn more about us.

) } ``` And: ```jsx function Contact() { return (

Contact

Get in touch with us.

) } ``` In a real project, you'd usually put these in separate files: ```text src/ │ ├── pages/ │ ├── Home.jsx │ ├── About.jsx │ ├── Contact.jsx │ └── NotFound.jsx │ ├── components/ │ └── Navbar.jsx │ ├── App.jsx └── main.jsx ``` This keeps page-level components separate from smaller reusable components. --- # Defining Routes Now we need to tell React Router: > "When this URL appears, render this component." We do that with: ```jsx ``` and: ```jsx ``` For example: ```jsx import { Routes, Route } from "react-router" import Home from "./pages/Home" import About from "./pages/About" import Contact from "./pages/Contact" import NotFound from "./pages/NotFound" function App() { return ( } /> } /> } /> } /> ) } ``` Each route connects a URL path to some JSX. --- # Understanding `` Look at: ```jsx } /> ``` There are two important parts. The first is: ```jsx path="/about" ``` This tells React Router which URL to match. The second is: ```jsx element={} ``` This tells React Router what should render when that URL matches. So: ```text URL /about ↓ ↓ ``` That's routing in its simplest form. --- # The Home Route The home route usually uses: ```jsx path="/" ``` For example: ```jsx } /> ``` So when the user visits: ```text https://example.com/ ``` React Router renders: ```jsx ``` --- # Creating a 404 Route What happens if someone visits: ```text /definitely-not-a-real-page ``` and we haven't defined that route? We normally want to show a **404 page**. Create: ```jsx function NotFound() { return (

404 😵

The page you're looking for doesn't exist.

) } ``` Then define: ```jsx } /> ``` The: ```text * ``` acts as a catch-all. If nothing more specific matches, React Router can render the `NotFound` component. Because apparently users will eventually visit a URL you never imagined. They always do. 😂 --- # Navigation With `` We have routes now, but users still need a way to navigate between them. You might think of normal HTML: ```html About ``` For navigation inside a React Router application, we normally use: ```jsx ``` Import it: ```jsx import { Link } from "react-router" ``` Then: ```jsx function Navbar() { return ( ) } ``` Notice: ```jsx to="/about" ``` instead of: ```html href="/about" ``` --- # Why Use `` Instead of ``? For internal application routes, `Link` allows React Router to perform client-side navigation. So: ```jsx About ``` can update the URL and render the appropriate route without doing a full document navigation. A normal: ```html ``` may perform traditional browser navigation. That doesn't mean `` is forbidden in React. Please don't leave this chapter believing HTML anchors have been cancelled. 😂 Use `Link` for navigation **inside your React Router application**. Use normal anchors when appropriate for things such as external websites: ```jsx External Website ``` A useful rule is: ```text Internal app route ↓ External website/document ↓ ``` --- # Building a Navbar Here's a complete example: ```jsx import { Link } from "react-router" function Navbar() { return ( ) } ``` Then use it in `App`: ```jsx function App() { return ( <> } /> } /> } /> } /> ) } ``` Because `Navbar` is outside `Routes`, it stays visible while the route content changes. --- # `Link` vs `NavLink` `Link` is perfect when you simply need navigation. But navigation bars often need to show which page is currently active. For example: ```text Home ABOUT Contact ↑ currently active ``` For this, React Router gives us: ```jsx ``` `NavLink` knows whether its route is currently active. --- # Using `NavLink` Import it: ```jsx import { NavLink } from "react-router" ``` Then: ```jsx ({ color: isActive ? "#60a5fa" : "white", fontWeight: isActive ? "bold" : "normal", textDecoration: "none" })} > About ``` The interesting part is: ```jsx ({ isActive }) => (...) ``` React Router gives the style [function](/javascript/functions-in-javascript) information about the current link. If the URL matches: ```text /about ``` then: ```text isActive = true ``` Otherwise: ```text isActive = false ``` So we can style the link differently. --- # A Reusable Navbar With `NavLink` Instead of repeating the styling logic, we can create a [function](/javascript/functions-in-javascript): ```jsx import { NavLink } from "react-router" function Navbar() { const getLinkStyle = ({ isActive }) => ({ color: isActive ? "#60a5fa" : "white", fontWeight: isActive ? "bold" : "normal", textDecoration: "none" }) return ( ) } ``` The: ```jsx end ``` on the home link tells React Router that `/` should only be considered active when the URL matches the end of that route. Otherwise, because many routes begin with `/`, your Home link can behave more broadly than you intended. Tiny prop. Potentially confusing afternoon. 😌 --- # Dynamic Routes 🔀 So far, every route has been fixed: ```text /about /contact ``` But imagine a store with thousands of products. We don't want to manually create: ```jsx ``` until the sun explodes. Instead, we create a **dynamic route**. For example: ```jsx } /> ``` The: ```text :productId ``` part is a URL parameter. It means that part of the URL can change. So all of these can match: ```text /products/1 /products/2 /products/42 /products/iphone ``` The changing part becomes: ```text productId ``` --- # Reading URL Parameters With `useParams` Inside the page component, we can read URL parameters using: ```jsx useParams() ``` Import it: ```jsx import { useParams } from "react-router" ``` Then: ```jsx function ProductDetail() { const { productId } = useParams() return (

Product ID: {productId}

) } ``` If the current URL is: ```text /products/42 ``` then: ```jsx productId ``` will contain: ```text "42" ``` Notice that URL parameters are strings. Even when the URL contains: ```text 42 ``` you're receiving text from the URL. If you specifically need a number, convert it: ```jsx const id = Number(productId) ``` --- # A Real Product Detail Example Let's create some sample data: ```jsx const products = { "1": { name: "Laptop", price: 999, description: "A powerful laptop." }, "2": { name: "Phone", price: 699, description: "A sleek smartphone." }, "3": { name: "Tablet", price: 499, description: "A versatile tablet." } } ``` Now: ```jsx import { useParams } from "react-router" function ProductDetail() { const { productId } = useParams() const product = products[productId] if (!product) { return (

Product not found! 😵

) } return (

{product.name}

Price: ${product.price}

{product.description}

) } ``` If the user visits: ```text /products/2 ``` then: ```text productId = "2" ``` and React displays the Phone. Same route. Same component. Different URL data. That's much more scalable. --- # Creating Links to Dynamic Routes Suppose we have: ```jsx const products = [ { id: 1, name: "Laptop" }, { id: 2, name: "Phone" } ] ``` We can generate links: ```jsx import { Link } from "react-router" function ProductList() { return (

{product.name}

) } ``` For Laptop: ```jsx `/products/${product.id}` ``` becomes: ```text /products/1 ``` For Phone: ```text /products/2 ``` Click the link, React Router matches: ```jsx /products/:productId ``` and `useParams()` tells the page which product was selected. --- # URL Parameters vs Props URL parameters can feel a little like props because both provide information to components. But they come from different places. Props: ```jsx ``` come from another React component. URL parameters: ```text /products/42 ``` come from the URL. Then: ```jsx const { productId } = useParams() ``` reads that URL value. A useful comparison is: ```text Props ↓ React component tree URL Params ↓ Browser URL ``` --- # Programmatic Navigation 🧭 `Link` is great when the user should click something to navigate. But sometimes navigation should happen because [JavaScript](/courses/javascript) logic completed. For example: ```text User submits login form ↓ Login succeeds ↓ Send user to dashboard ``` There isn't necessarily a link involved. For this, React Router provides: ```jsx useNavigate() ``` --- # Using `useNavigate` Import it: ```jsx import { useNavigate } from "react-router" ``` Then: ```jsx function Example() { const navigate = useNavigate() function goToDashboard() { navigate("/dashboard") } return ( ) } ``` Calling: ```jsx navigate("/dashboard") ``` navigates to: ```text /dashboard ``` --- # Login Example With `useNavigate` Here's a more realistic example: ```jsx import { useState } from "react" import { useNavigate } from "react-router" function LoginForm() { const navigate = useNavigate() const [email, setEmail] = useState("") const [password, setPassword] = useState("") function handleSubmit(event) { event.preventDefault() if (!email || !password) { return } // Imagine login succeeds here. navigate("/dashboard") } return ( ) } ``` The user submits the form. Our JavaScript handles the login. Then: ```jsx navigate("/dashboard") ``` moves them to the dashboard route. --- # Going Back and Forward `navigate()` can also work with browser history. For example: ```jsx navigate(-1) ``` means: > Go back one history entry. Similar to clicking the browser's Back button. You can also use: ```jsx navigate(1) ``` to move forward one entry when possible. Example: ```jsx ``` Very useful on detail pages. --- # Replacing History By default: ```jsx navigate("/dashboard") ``` adds a new entry to browser history. Sometimes you don't want the previous page to remain as a normal history entry. For example, after login: ```jsx navigate( "/dashboard", { replace: true } ) ``` can replace the current history entry. This may be useful when you don't want someone clicking Back and immediately returning to a transitional page such as a completed login step. Don't use `replace` everywhere, though. Browser Back buttons are useful. Users become suspicious when websites start fighting them. 😭 --- # When to Use `Link` vs `useNavigate` A good rule is: > If the UI is fundamentally a navigation link, use `Link`. For example: ```jsx View Products ``` If navigation happens after some application logic: ```text Save completed Login successful Checkout finished Form processed ``` then `useNavigate()` can make sense. Don't turn every link into: ```jsx ``` just because you learned a new Hook. Use the tool that matches the interaction. --- # Nested Routes 🪆 Real applications often have layouts shared by several routes. Imagine a dashboard: ```text /dashboard /dashboard/settings /dashboard/profile ``` All of those pages may share: ```text Dashboard sidebar Dashboard navigation Dashboard header ``` We don't want to duplicate that layout in every page. This is where **nested routes** become useful. --- # Understanding Nested Routes We can create a parent route: ```jsx } > ``` and put child routes inside it: ```jsx } /> } /> } /> ``` Complete structure: ```jsx } > } /> } /> } /> ``` Notice that the child paths are: ```text settings profile ``` not: ```text /dashboard/settings /dashboard/profile ``` Because they're nested underneath `/dashboard`, React Router builds the full path for us. --- # What Is ``? The parent needs to tell React Router where the child route should appear. That's what: ```jsx ``` does. Example: ```jsx import { NavLink, Outlet } from "react-router" function DashboardLayout() { return (

) } ``` The important part is: ```jsx ``` You can think of it as: > "React Router, put the currently matched child route here." --- # How `` Works If the URL is: ```text /dashboard ``` React renders: ```text DashboardLayout ↓ ↓ Overview ``` If the URL becomes: ```text /dashboard/settings ``` the layout remains: ```text DashboardLayout ``` but the `Outlet` changes: ```text DashboardLayout ↓ ↓ Settings ``` And: ```text /dashboard/profile ``` becomes: ```text DashboardLayout ↓ ↓ Profile ``` That's why nested routes are great for dashboards, admin panels, account pages, documentation sites, and other sections with shared layouts. --- # What Does `index` Mean? Look at: ```jsx } /> ``` An **index route** is the default child route for its parent. So if the parent path is: ```text /dashboard ``` the index route appears there. You don't need: ```jsx path="" ``` or: ```jsx path="/dashboard" ``` for that child. You simply write: ```jsx index ``` You can think of it as: > "If the parent route matches exactly and no deeper child path is selected, render this." --- # Relative Links Inside our dashboard layout, we wrote: ```jsx ``` instead of: ```jsx ``` That's called **relative navigation**. Because the link is already inside the `/dashboard` route hierarchy: ```text settings ``` can resolve relative to that route. This becomes extremely convenient for deeply nested interfaces because your child components don't need to repeat the entire URL every time. --- # Search Parameters 🔎 Sometimes information belongs in the URL but doesn't represent a completely different page. For example: ```text /search?q=react&page=2 ``` The route itself is: ```text /search ``` but after the `?` we have **search parameters**, also called query parameters or a query string. Here: ```text q=react ``` might represent the search term. And: ```text page=2 ``` might represent pagination. These are extremely common for filters, sorting, search pages, tabs, and pagination. --- # Reading Search Parameters React Router provides: ```jsx useSearchParams() ``` Import it: ```jsx import { useSearchParams } from "react-router" ``` Then: ```jsx function SearchPage() { const [searchParams] = useSearchParams() const query = searchParams.get("q") return (

Search: {query}

) } ``` If the URL is: ```text /search?q=react ``` then: ```jsx searchParams.get("q") ``` returns: ```text "react" ``` --- # Search Parameters Are Strings Too Just like route parameters, search parameters come from the URL. So: ```text ?page=2 ``` gives you: ```text "2" ``` not the JavaScript number: ```text 2 ``` If you need a number: ```jsx const page = Number(searchParams.get("page")) || 1 ``` Now you can perform normal calculations with it. --- # Updating Search Parameters `useSearchParams()` gives us: ```jsx const [ searchParams, setSearchParams ] = useSearchParams() ``` We can change the URL using: ```jsx setSearchParams({ q: "react", page: "1" }) ``` The URL becomes something like: ```text /search?q=react&page=1 ``` React Router handles the navigation for us. --- # Search Page Example Here's a complete example: ```jsx import { useSearchParams } from "react-router" function SearchPage() { const [ searchParams, setSearchParams ] = useSearchParams() const query = searchParams.get("q") || "" const page = Number( searchParams.get("page") ) || 1 function handleQueryChange(event) { setSearchParams({ q: event.target.value, page: "1" }) } function nextPage() { setSearchParams({ q: query, page: String(page + 1) }) } return (

Showing results for:{" "} {query}

Page: {page}

) } ``` Now the URL becomes part of our application's state. --- # Why Put Search State in the URL? You could store everything in normal React state: ```jsx const [query, setQuery] = useState("") ``` So why use search parameters? Because sometimes users should be able to: * bookmark the current search * share the URL * refresh without losing filters * use Back and Forward navigation * return to the same page number Imagine searching for: ```text React ``` on page: ```text 3 ``` If the URL is: ```text /search?q=react&page=3 ``` you can copy and send that exact state to someone else. That's much more useful than having all the information disappear the moment the page reloads. --- # Route Params vs Search Params These can feel similar, so here's a useful distinction. Use a route parameter when the value identifies **what page/resource you're looking at**. Example: ```text /products/42 ``` where: ```text 42 ``` identifies a product. Route: ```jsx /products/:productId ``` Read it with: ```jsx useParams() ``` Use search parameters for optional controls or variations of the current page. Example: ```text /products?category=laptops&sort=price ``` Read them with: ```jsx useSearchParams() ``` A useful mental model is: ```text Route parameter "What thing am I viewing?" Search parameter "How should this page be filtered, sorted, searched, or configured?" ``` Not an absolute rule, but a very useful one. --- # Route Structure Example A medium-sized application might look like: ```text / ├── /about ├── /contact ├── /products │ └── /products/:productId │ ├── /search?q=... │ └── /dashboard ├── /dashboard/settings └── /dashboard/profile ``` And your routes might look like: ```jsx function App() { return ( <> } /> } /> } /> } /> } /> } /> } > } /> } /> } /> } /> ) } ``` Now your React application has an actual navigation structure rather than one increasingly nervous `App.jsx` file. 😌 --- # A Note About Refreshing Routes Here's something beginners often discover after deployment. You navigate to: ```text /products/42 ``` inside the application. Everything works. Then you refresh the browser. Suddenly: ```text 404 Not Found ``` Wonderful. 😭 Why? Client-side React Router understands: ```text /products/42 ``` but your web server also needs to know how to handle direct requests for application routes. For a traditional SPA deployment using `BrowserRouter`, the server usually needs to be configured to send your application's: ```text index.html ``` for routes that belong to the client-side application. Then React Router reads the URL and renders the correct component. The exact configuration depends on where you deploy. So remember: > Client-side routing handles navigation in React, but your hosting setup must also support direct requests to those URLs. This is one reason framework-based routing setups can be attractive for larger applications. --- # Should You Use Declarative, Data, or Framework Mode? Now that you understand the basics, let's answer the practical question. ## Use Declarative Mode When... You're learning React Router, adding straightforward routing to an existing Vite SPA, or already have your own data-fetching architecture. The setup looks like: ```jsx ``` with: ```jsx ``` It's simple and explicit. That's why we're using it in this chapter. --- ## Use Data Mode When... You want React Router to handle more of the data lifecycle while keeping control of your project's overall architecture. Data Mode begins with something like: ```jsx import { createBrowserRouter } from "react-router" import { RouterProvider } from "react-router/dom" ``` Then: ```jsx const router = createBrowserRouter([ { path: "/", element: }, { path: "/about", element: } ]) ``` and: ```jsx createRoot( document.getElementById("root") ).render( ) ``` This opens the door to route-level: ```text loaders actions pending states fetchers ``` If you're building a larger SPA, Data Mode is definitely worth learning after the routing fundamentals. --- # What About Framework Mode? For a brand-new application, React Router v7's official guidance gives **Framework Mode** a strong recommendation, especially when you don't already have an architectural preference. Framework Mode can handle considerably more for you, including things such as route modules, data loading, actions, code splitting, SPA rendering, server-side rendering, and static pre-rendering. Instead of defining your entire application with: ```jsx ``` you can use framework route configuration and route modules. That's powerful, but it's also a larger architectural topic. For a React fundamentals course, I would teach the progression like this: ```text 1. Declarative Mode ↓ Understand routes, links, params, nesting, navigation 2. Data Mode ↓ Learn loaders, actions, RouterProvider, pending UI 3. Framework Mode ↓ Learn complete route modules, rendering strategies, server features ``` That progression lets students understand what's happening instead of immediately handing everything to a framework and hoping nobody asks questions. 😅 --- # Common Beginner Mistakes 🚨 ## Mistake 1: Using Old v6 Imports in New v7 Code You'll still see: ```jsx import { Link, Routes, Route } from "react-router-dom" ``` in many older tutorials. For new React Router v7 code, prefer: ```jsx import { Link, Routes, Route } from "react-router" ``` That makes your code align better with the v7 package structure. --- ## Mistake 2: Forgetting `BrowserRouter` You write: ```jsx } /> ``` but forget to place the application inside a router. Then React Router complains because it has no routing context. Make sure something higher in the tree provides: ```jsx ``` when you're using Declarative Mode. --- ## Mistake 3: Using `` for Every Internal Route This: ```jsx About ``` can perform normal browser navigation. For normal internal React Router navigation, prefer: ```jsx About ``` But remember that normal anchors are still completely appropriate for external destinations. --- ## Mistake 4: Calling `useNavigate()` Outside a Component Wrong: ```jsx const navigate = useNavigate() function App() { // ... } ``` Hooks need to be called inside React components or custom Hooks. Correct: ```jsx function App() { const navigate = useNavigate() // ... } ``` The normal Rules of Hooks still apply. React Router did not negotiate an exemption. 😌 --- ## Mistake 5: Forgetting That Params Are Strings If: ```text /products/42 ``` then: ```jsx const { productId } = useParams() ``` gives you: ```text "42" ``` not: ```text 42 ``` If you need numeric comparison: ```jsx const id = Number(productId) ``` Don't spend half an hour wondering why: ```jsx productId === 42 ``` is false. JavaScript already provides enough emotional challenges without us volunteering for more. 😂 --- ## Mistake 6: Putting Child Paths in Full Again If you already have: ```jsx ``` then a nested settings route can be: ```jsx } /> ``` You usually don't need: ```jsx path="/dashboard/settings" ``` inside that nested route. Nested routing is designed to compose URL segments. --- ## Mistake 7: Forgetting `` You correctly create: ```jsx } > } /> ``` Then `/dashboard/settings` loads... but Settings doesn't appear. Why? Because the layout never included: ```jsx ``` React Router knows which child matched. It just has nowhere to put it. `Outlet` is basically the reserved parking space for nested routes. 🚗 --- ## Mistake 8: Using `navigate()` for Everything This works: ```jsx ``` but if something is conceptually a normal navigation link, prefer: ```jsx About ``` Use semantic navigation when possible. Use `navigate()` when JavaScript logic determines that navigation should happen. --- # A Complete Small Router Example Let's put the major concepts together. ```jsx import { Routes, Route } from "react-router" import Navbar from "./components/Navbar" import Home from "./pages/Home" import About from "./pages/About" import Products from "./pages/Products" import ProductDetail from "./pages/ProductDetail" import DashboardLayout from "./pages/DashboardLayout" import Overview from "./pages/Overview" import Settings from "./pages/Settings" import Profile from "./pages/Profile" import NotFound from "./pages/NotFound" function App() { return ( <> } /> } /> } /> } /> } > } /> } /> } /> } /> ) } export default App ``` And `main.jsx`: ```jsx import { StrictMode } from "react" import { createRoot } from "react-dom/client" import { BrowserRouter } from "react-router" import App from "./App.jsx" createRoot( document.getElementById("root") ).render( ) ``` At this point, you have a proper client-side routed React application. Not bad for two components with names that sound like superhero gadgets: ```text BrowserRouter RouterProvider ``` Frontend naming departments have been working overtime. 😂 --- # A Better Mental Model 🧠 Don't think of React Router as: > "A thing that creates pages." Think of it as: > **A system that connects the browser's current location to part of your React component tree.** For example: ```text Browser URL /products/42 ↓ React Router ↓ matches /products/:productId ↓ ↓ useParams() ↓ productId = "42" ``` For navigation: ```text ↓ URL changes ↓ Router finds matching route ↓ renders ``` For nested routing: ```text /dashboard/settings ↓ DashboardLayout ↓ ↓ Settings ``` For query strings: ```text /search?q=react&page=2 ↓ useSearchParams() ↓ q = "react" page = "2" ``` Once you understand those relationships, React Router becomes much easier than memorizing random Hooks. --- # Quick React Router v7 Cheat Sheet 🚀 Install v7: ```bash npm install react-router@7 ``` Enable Declarative Mode: ```jsx import { BrowserRouter } from "react-router" ``` Define routes: ```jsx } /> } /> ``` Internal navigation: ```jsx About ``` Active navigation: ```jsx About ``` Dynamic route: ```jsx } /> ``` Read the parameter: ```jsx const { productId } = useParams() ``` Navigate from JavaScript: ```jsx const navigate = useNavigate() navigate("/dashboard") ``` Go back: ```jsx navigate(-1) ``` Replace current history entry: ```jsx navigate( "/dashboard", { replace: true } ) ``` Nested route: ```jsx } > } /> } /> ``` Render the nested child: ```jsx ``` Read search parameters: ```jsx const [searchParams] = useSearchParams() const query = searchParams.get("q") ``` Update search parameters: ```jsx setSearchParams({ q: "react", page: "1" }) ``` 404 route: ```jsx } /> ``` --- # Chapter Summary 🎯 React Router connects URLs to your React interface. In the Declarative Mode used throughout this chapter, the application is wrapped with: ```jsx ``` Routes are defined using: ```jsx ``` A route connects a path: ```jsx path="/about" ``` to some UI: ```jsx element={} ``` So: ```text /about ↓ ``` For normal internal navigation, use: ```jsx ``` rather than relying on a normal document navigation. When your navigation needs active-state styling, use: ```jsx ``` Dynamic routes let one component handle many URLs: ```jsx /products/:productId ``` and: ```jsx useParams() ``` reads the dynamic value. When navigation should happen from JavaScript logic, use: ```jsx useNavigate() ``` Nested routes allow several pages to share a layout: ```text /dashboard /dashboard/settings /dashboard/profile ``` with: ```jsx ``` marking where the matched child should render. Search parameters let the URL store information such as: ```text /search?q=react&page=2 ``` and: ```jsx useSearchParams() ``` lets your component read and update those values. The big picture looks like: ```text URL ↓ Router ↓ Matching Route ↓ Component ↓ UI ``` And navigation reverses the journey: ```text User clicks Link ↓ URL changes ↓ Router checks routes ↓ Matching component renders ``` That's the core of React Router. You don't need to memorize every router API immediately. If you properly understand **routes, links, parameters, nested routes, and navigation**, the more advanced features become much easier later. --- # Which React Router Approach Should You Learn Next? For this course, **Declarative Mode is the right starting point** because you're still learning React fundamentals. You've already learned components, props, state, events, lists, and Hooks. Declarative routing builds directly on those concepts without introducing an entire application framework at the same time. After you're comfortable with this chapter, the next useful step is **Data Mode**, where you can learn: ```text createBrowserRouter() RouterProvider loader action useLoaderData pending navigation Form useFetcher ``` Those APIs allow routing and data loading to work together much more closely. For a completely new larger project, also take a serious look at **React Router Framework Mode**. In React Router v7, that's the direction officially recommended for developers starting fresh without an existing architecture preference. So the learning path I'd recommend is: ```text React fundamentals ↓ Declarative Router ↓ Understand routing properly ↓ Data Router ↓ Loaders + Actions ↓ Framework Mode ↓ Larger production architecture ``` Learn the idea first. Then let the framework do more work for you. Doing it in the opposite order is how you end up confidently writing: ```jsx loader() ``` while having absolutely no idea who loaded what or why. 😂 --- # Keep Learning With asif.to 🚀 At this point, your React application can do considerably more than when we started: ```text Components 🧩 Build reusable UI Props 📦 Pass information State 🧠 Remember changing values Events ⚡ Respond to users Lists 📋 Render collections Conditions 🤔 Control what appears Effects 🔄 Synchronize external systems Lifting State ⬆️ Share state between components React Router 🧭 Give your application real navigation ``` Routing is an important milestone because your React project can now start feeling like an actual application rather than one increasingly crowded screen. The best way to practice this chapter is to build a small multi-page project with: ```text Home Products Product Details About Dashboard Settings 404 Page ``` Add a navigation bar with `NavLink`, create dynamic product routes, add a nested dashboard using `Outlet`, and build a search page using URL search parameters. Once you've done that yourself, routes stop feeling like mysterious configuration and start feeling like what they really are: > **A map between your URLs and your UI.** For more beginner-friendly React lessons, practical web development examples, and explanations that focus on understanding instead of copying, visit **asif.to**. Follow **asif.to** on its social handles too for shorter React tips, programming explanations, and practical examples. **Build components. Give them URLs. Suddenly it looks suspiciously like a real app. 🧭🚀** — **asif.to**