React Router Basics for Beginners

1What Is React Router?

React Router is the standard library for adding navigation to a React single-page application. It maps URL paths to components, so visiting /about renders your About page and /contact renders Contact — all without the browser doing a full page reload. The app swaps components in place and updates the URL.

This is called client-side routing. Because React apps typically load one HTML file, React Router intercepts navigation, renders the matching component, and keeps the browser's address bar, history, and back button in sync. Users get instant transitions and shareable URLs.

2Setting Up Routes

You wrap your app in a router and declare each path with a Route inside a Routes element. The router matches the current URL against your routes and renders the best match.

• import { BrowserRouter, Routes, Route } from 'react-router-dom'
• <BrowserRouter> wraps your whole app once, usually in main.jsx.
• <Routes> holds all your Route definitions and renders the first match.
• <Route path='/about' element={<About />} /> # map a path to a component
• <Route path='*' element={<NotFound />} /> # catch-all 404 route

3Navigating With Links

Use Link and NavLink instead of plain anchor tags for internal navigation. A regular <a> tag triggers a full page reload, throwing away your app state; Link changes the route in place.

• <Link to='/about'>About</Link> # client-side navigation, no reload
• <NavLink to='/about'>About</NavLink> # adds an active class when matched
• NavLink is ideal for nav bars because it styles the current page automatically.
• Reserve <a href> for external links that should leave your app.

4Dynamic Routes and Params

A dynamic segment, written with a colon like /users/:id, lets one route match many URLs. The route renders for /users/1, /users/2, and so on, and you read the value with the useParams hook.

This is how detail pages work. A single UserProfile component serves every user; it pulls the id from the URL and fetches the matching record. Query strings, read with useSearchParams, handle optional filters like ?sort=name.

• <Route path='/users/:id' element={<UserProfile />} />
• const { id } = useParams() # read the :id segment
• const [params] = useSearchParams() # read ?key=value query strings
• params.get('sort') # get a single query parameter

5Nested Routes and Layouts

Nested routes let a parent layout wrap several child pages. You define child Route elements inside a parent, and the parent renders an Outlet where the matched child appears. This is perfect for dashboards with a shared sidebar.

<Route path='/dashboard' element={<DashboardLayout />}>
  <Route index element={<Overview />} />
  <Route path='settings' element={<Settings />} />
</Route>

function DashboardLayout() {
  return (<div><Sidebar /><main><Outlet /></main></div>);
}

6Programmatic Navigation

Sometimes you need to navigate from code rather than a click — after a successful login or form submission, for example. The useNavigate hook returns a function that changes the route imperatively.

• const navigate = useNavigate()
• navigate('/dashboard') # go to a route in code
• navigate(-1) # go back one entry, like the browser back button
• navigate('/login', { replace: true }) # replace history instead of pushing

7Best Practices

A few habits keep routing clean and your app fast as the number of pages grows.

• Use Link or NavLink for internal navigation; reserve <a> for external links.
• Add a catch-all path='*' route so unknown URLs show a friendly 404 page.
• Lazy-load heavy route components with React.lazy and Suspense to shrink the initial bundle.
• Group related pages under a nested layout to avoid repeating shared chrome.
• Keep route definitions in one place so the app's URL map is easy to scan.

8Key Takeaways

React Router turns a single-page app into a multi-page experience. Keep these fundamentals in hand.

• React Router maps URLs to components without full page reloads.
• Define routes with Routes and Route; navigate with Link and NavLink.
• Dynamic :id segments plus useParams serve many URLs from one component.
• Nested routes with Outlet share a layout across child pages.
• useNavigate handles code-driven navigation like post-login redirects.

9Frequently Asked Questions

Q: What is the difference between Link and an anchor tag? A: A plain <a> tag triggers a full page reload, which reloads all your JavaScript and loses app state. React Router's Link intercepts the click and swaps components in place, keeping the app fast and preserving state while still updating the URL.

Q: How do I read a URL parameter like an id? A: Define the route with a dynamic segment such as path='/users/:id', then call the useParams hook inside the component to get an object like { id }. For query strings, use the useSearchParams hook instead.

Q: What is an Outlet for? A: An Outlet marks where a nested child route should render inside a parent layout. The parent renders shared UI such as a sidebar and places an Outlet where the matched child page appears, so the layout stays fixed while inner content changes.

Q: How do I navigate after a form submits? A: Call the useNavigate hook to get a navigate function, then invoke navigate('/somewhere') in your submit handler after the request succeeds. Passing { replace: true } avoids adding the form page to the back-button history.