Summary - Router basics

Set up a two-route skeleton with home and about pages.

Summary - Router basics

In this group you learned what React Router is, defining routes, and navigation with Link/NavLink. Now you can build basic SPAs.

The recipe: wrap with BrowserRouter, define Route inside Routes, build the menu with NavLink. Add a path="*" route for 404. These four steps set up a working router.

In the next step you'll write an App component combining NavBar + Routes.

Exercise App router + navbar

Complete the skeleton. Write an App component. Inside <BrowserRouter>, first <NavBar />, then inside <Routes> define two routes: <Route path="/" element={ '{ <Home /> }' } />, <Route path="/about" element={ '{ <About /> }' } />. Export it. (Assume all components are imported.)

Show example solution

function App() {
  return (
    <BrowserRouter>
      <NavBar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Test yourself

Which reloads the page?
- <a href>
- <Link to>
- <NavLink to>
- <Route>
Show answer

<a href> — a href reloads the page.
Match the router recipe

BrowserRouter

wraps
Routes

container
Route

route
NavLink

menu

Next lesson: URL parameters

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies