What is React Router? Complete Guide for Beginners

When stepping into the world of React programming, you'll quickly realize that React alone cannot build a complete web application. React helps you create excellent user interfaces (UI), but how do users navigate between different "pages"? How can the URL in the browser change corresponding to the displayed content without reloading the entire page?

The answer lies in a powerful tool that's almost standard in the React ecosystem: React Router.

This article will help you understand "What is React Router?", why it's important, and how to use its core components to build dynamic, smooth, and professional web applications.

The Story Begins with SPA (Single-Page Application)

To understand the role of React Router, we first need to understand the concept of Single-Page Application (SPA).

• Traditional Website (Multi-Page Application): Every time you click a link (e.g., from homepage to about page), the browser sends a request to the server, the server returns a completely new HTML file, and the browser reloads the entire page. This process causes a slight delay and a "jerk" feeling.
• Single-Page Application: The entire application is loaded only once. When users interact, instead of reloading the page, JavaScript (specifically React) automatically changes and updates components on the interface to display new content. This creates a fast, smooth, seamless user experience like using a desktop application.

But SPAs raise a problem: How to manage these virtual "pages"? How can the URL https://my-app.com/products/123 be synchronized with the currently displayed interface? That's when React Router "shines".

What is React Router?

React Router is a standard, most popular routing library for React. Simply put, React Router allows you to synchronize your application's user interface (UI) with the browser's URL.

It acts as a "guide" or a "route coordinator" for your React application, deciding which component to display based on the path (URL) that users are accessing.

Main tasks of React Router:

• Display components corresponding to URLs: For example, when users access /home, it will display HomePageComponent. When they access /about, it will display AboutPageComponent.
• Allow navigation without page reload: Provides tools to create links and navigate smoothly.
• Manage navigation history: Allows users to use browser "Back", "Forward" buttons naturally.
• Handle dynamic URLs: Easily create product detail pages, articles... with URLs like /products/:id or /posts/:slug.

Why is React Router so important?

Using React Router is not just a choice, but almost a requirement for most complex React applications. Here are the main reasons:

1. Seamless User Experience: This is the biggest benefit. Eliminating the need to reload entire pages makes your application faster, instantly responsive, and gives a modern feel.
2. Clear Code Organization: React Router helps you structure your application into logical "pages". Each page is an independent component linked to a specific URL. This makes your source code much easier to read, manage, and expand.
3. Easy Sharing & Bookmarking: Since each virtual "page" has a real URL, users can easily copy, share links to specific content, or bookmark to view later.
4. SEO Friendly: Although SPAs have SEO challenges, having separate URLs for each page is the first and most important step for search engines like Google to "understand" and index different content in your application.

Core Components of React Router

React Router provides a powerful set of components and hooks. Here are the most important components you need to master in the latest versions (v6+).

1. BrowserRouter

This is the parent component that wraps your entire application. It uses the HTML5 History API to keep your interface synchronized with the URL. You only need to declare it once at the highest level of your application, usually in index.js or App.js.

// In index.js file
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

2. Routes and Route

This is an inseparable pair, the heart of routing.

• <Routes>: Acts as a "container", wrapping all child <Route> routes. It will iterate through the <Route> inside and display the component of the first <Route> whose path matches the current URL.
• <Route>: Defines a specific route. It has two important props:
  • path: String that determines the URL path (e.g., /, /about, /products/:id).
  • element: React component that will be displayed when path matches.

// In App.js file
import { Routes, Route } from 'react-router-dom'
import HomePage from './pages/HomePage'
import AboutPage from './pages/AboutPage'
import NotFoundPage from './pages/NotFoundPage'

function App() {
  return (
    <div>
      {/* Common components like Header, Navbar can be placed here */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        {/* Route that catches all unmatched paths */}
        <Route path="*" element={<NotFoundPage />} />
      </Routes>
    </div>
  )
}

3. Link

To create navigation links in your application, instead of using traditional <a> tags (which cause page reloads), you must use React Router's <Link> component.

import { Link } from 'react-router-dom'

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  )
}

4. useNavigate Hook

Sometimes you need to programmatically redirect users, for example after they successfully log in or submit a form. The useNavigate hook allows you to do this.

import { useNavigate } from 'react-router-dom'

function LoginForm() {
  const navigate = useNavigate()

  const handleLogin = () => {
    // User authentication logic...
    // If successful, redirect to dashboard page
    navigate('/dashboard')
  }

  return <button onClick={handleLogin}>Login</button>
}

5. useParams Hook

This is an extremely useful hook for getting dynamic parameters from URLs. For example, with a route that has path /products/:productId and element ProductDetail, you can get the productId value from within the ProductDetail component.

import { useParams } from 'react-router-dom'

function ProductDetail() {
  // Get the value of `productId` from the URL
  const { productId } = useParams()

  // Now you can use productId to fetch corresponding product data
  return <div>This is the detail page for product with ID: {productId}</div>
}

Advanced Concepts

Once you've mastered the basics, you can explore other powerful features:

• Nested Routes: Build complex layouts, for example an admin page with a common sidebar and changing content in the main area.
• Protected Routes: Require users to log in before accessing certain pages.
• HashRouter: An alternative solution to BrowserRouter, using the # symbol in URLs (my-app.com/#/about). Useful for older server environments that don't support client-side routing.

React Router is not just a library, it's a core mindset when building applications with React. It brings structure, navigation capabilities, and modern user experience that today's web applications require.

By understanding what React Router is and mastering components like <BrowserRouter>, <Routes>, <Route>, <Link> along with convenient hooks, you have the key to transform individual React components into a complete, organized, and truly professional web application. Good luck on your journey to conquer React!