Multi-page React App
Part of the Full Stack Developer Roadmap
In short
Time to build something with more than one screen. A multi-page React app teaches you routing, shared layouts and URL params, the skeleton every real frontend is built on.
A React app with multiple routed pages sharing common layout — practice for React Router, component composition, and structuring a real (if still frontend-only) application.
Think of it like this
One society gate, many flats
In a housing society, everyone passes the same gate and corridor, but each family has its own flat. Your Layout is the gate and corridor: navbar and footer that never change. Each route is a flat, swapped in behind the same entrance.
Watch it happen
Build plan
1/6Create the app with Vite and install react-router. Commit right away.
The big ideas
What you need to know
Client-side routing
The router swaps components when the URL changes, without reloading the page from the server.
Shared layout with Outlet
Nested routes render inside the parent's <Outlet />, so the navbar is written once.
Dynamic segments
A path like courses/:slug matches every course. useParams() gives you the slug to look up data.
Handle the unknown
Add an error or catch-all route so a typo in the URL shows a friendly page, not a blank screen.
See it in code
Walk through the code
1import { createBrowserRouter, RouterProvider, Outlet, NavLink } from "react-router";2function Layout() {3 return <>4 <nav><NavLink to="/">Home</NavLink> <NavLink to="/courses">Courses</NavLink></nav>5 <main><Outlet /></main>6 </>;7}8 9const router = createBrowserRouter([10 { path: "/", element: <Layout />, errorElement: <NotFound />, children: [11 { index: true, element: <Home /> },12 { path: "courses", element: <Courses /> },13 { path: "courses/:slug", element: <CourseDetail /> },14 ] },15]);16export default function App() { return <RouterProvider router={router} />; }1/4Layout draws the nav once. Outlet is the empty spot where the current page goes.
Every page sits inside Layout, so the navbar stays put while the main area changes.
Save yourself the pain
Common mistakes
Oops
Using <a href> for internal links, so every click reloads the whole app.
Do this instead
Use <Link> or <NavLink> from the router. They change the URL without a full reload.
Oops
Deploying and finding that refreshing any page except / gives a 404.
Do this instead
Configure your host to serve index.html for all paths, the 'SPA fallback' or rewrite rule.
Your mission
First milestone: three working routes
Quick check
Your Courses page has a navbar on top. You open /courses/react. Why doesn't the navbar flicker or reload?
Go deeper
- 1Set up at least 4 distinct routes with a shared navigation layout.
- 2Practice nested routes for a section with its own sub-navigation.
- 3Add a 404 page for unmatched routes.
More projects at this stop
Dashboard UI
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
