React Router DOM, A Beginner's Guide to Routing in React

React Router DOM is a popular library used for managing routing in React applications. It allows you to create dynamic, single-page applications (SPAs) with multiple views, making navigation seamless and efficient. This guide covers the basics of React Router DOM and provides examples to help you get started.

What is React Router DOM?

React Router DOM is a routing library for React that enables navigation between views or pages in a React application. It uses components to define routes and manage navigation, ensuring a declarative and easy-to-use approach.

Key Features:

1. Dynamic Routing: Routes are defined as components, making them flexible and easy to manage.
2. Nested Routing: Allows for hierarchical route structures.
3. URL Parameters: Enables dynamic paths with parameters.

Installing React Router DOM

To use React Router DOM, install the library in your React project:

npm install react-router-dom

Ensure your React version is compatible with the latest version of React Router DOM.

Basic Example: Setting Up Routes

Step 1: Wrap Your App with BrowserRouter

The BrowserRouter component provides the routing context for your application.

import { BrowserRouter } from 'react-router-dom'
import App from './App'

function Main() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  )
}

export default Main

Step 2: Wrap Your App with BrowserRouter

Use the Route component to define different paths and the components they should render.

import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'

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

export default App

Navigating Between Pages

Use the Link component to navigate between routes without reloading the page.

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

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

URL Parameters and Dynamic Routing

You can create dynamic routes with parameters using :paramName in the path.

Example

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

function UserProfile() {
  const { username } = useParams()
  return <h1>Welcome, {username}!</h1>
}
<Route path="/user/:username" element={<UserProfile />} />

Access the route by visiting /user/john, and it will render:

Welcome, john!

Nested Routes

React Router allows you to define routes within routes, enabling nested views.

Example

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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="settings">Settings</Link>
        <Link to="profile">Profile</Link>
      </nav>
      <Outlet />
    </div>
  )
}

function Settings() {
  return <h2>Settings Page</h2>
}

function Profile() {
  return <h2>Profile Page</h2>
}

// Define routes
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>

Handling 404 Pages

Use the path="*" route to handle undefined routes.

Example:

function NotFound() {
  return <h1>404 - Page Not Found</h1>
}

<Route path="*" element={<NotFound />} />

Protected Routes

You can create protected routes by wrapping them with logic to check authentication.

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

function ProtectedRoute({ isAuthenticated, children }) {
  return isAuthenticated ? children : <Navigate to="/" />
}

// Usage
<Route
  path="/dashboard"
  element={
    <ProtectedRoute isAuthenticated={isUserLoggedIn}>
      <Dashboard />
    </ProtectedRoute>
  }
/>

Conclusion

React Router DOM is a powerful library that simplifies navigation in React applications. By mastering its core concepts—routes, navigation, and dynamic routing—you can build seamless single-page applications.

Happy coding!