React Routing Explained: A Comprehensive Guide to react-router-dom


React routing refers to client-side routing in React applications. It allows you to build single page apps that have multiple pages without making requests to the server every time you navigate.

In this comprehensive guide, you will learn all about implementing react routing in your apps using the popular react-router-dom library.

What is React Routing?

React routing is a form of client-side routing that enables navigation between views/components in a React app without full page reloads.

With React routing:

• The app renders only once on the initial load.
• Further navigations happen client-side without making additional requests to the server.
• The URL is updated via the HTML5 History API.
• Views are rendered in response to route matching.

This is different from traditional server-side routing where every route change triggers a whole new request-response cycle.

The benefits of React routing include:

• Faster navigation: No need to reload the full page every time. Only the components required for the route are re-rendered.
• Better UX: The app feels snappier with client-side routing.
• Easier development: You can organize code into components that correspond to routes.
• More flexible routing: Additional routes can be added just by defining new components.

Overall, React routing creates a much better experience for users by avoiding unnecessary full page reloads.

Now let‘s look at how to implement routing in a React app.

Getting Started with React Router DOM

React Router DOM is the officially recommended routing library for React. It has several router components that enable declarative React routing.

The main components you‘ll use from React Router DOM are:

• <BrowserRouter> – The router component for web apps. Uses the HTML5 history API for navigation.
• <Routes> and <Route> – Used to define routes and map them to components.
• <Link> – Renders an anchor tag for navigation instead of normal <a> tags.
• useNavigate, useParams, etc – Various React routing hooks.

To install React Router DOM:

npm install react-router-dom

Then import the components you need:

import { BrowserRouter, Routes, Route, Link } from ‘react-router-dom‘

With these basic building blocks, you can implement powerful routing!

Creating Routes

The starting point for routing is the <BrowserRouter> component. This sets up the routing context.

Then you specify <Route> components inside a <Routes> element to define your routes:

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="/contact" element={<Contact />} />
  </Routes>
</BrowserRouter>

The path prop defines the route path that will match. The element prop renders a component when the route matches.

So for the above routes:

• <Home> will render when the path is /
• <About> will render on /about
• <Contact> will render on /contact

You can have nested routes by declaring Routes inside other Routes.

Linking Between Routes

For linking between routes, use the <Link> component instead of anchor tags:

<Link to="/">Home</Link>
<Link to="/about">About</Link> 

This allows routing to happen client-side without a full page reload.

The to prop passed to <Link> accepts the same kind of paths as <Route>.

Dynamic Route Parameters

Routes can also have dynamic parameters which are parsed from the URL. This allows matching based on part of the path.

Dynamic parameters are defined with a : prefix. Like so:

<Route path="/post/:id" element={<Post />} /> 

Now this will match /post/1, /post/2, etc.

The dynamic :id value is available inside the <Post> component via the useParams hook:

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

function Post() {
  const { id } = useParams()

  return <p>Post {id}</p>
}

So any arbitrary values can be passed in the URL this way!

Using the useNavigate Hook

For programmatic navigation, you can use the useNavigate hook.

For example:

import { useNavigate } from ‘react-router-dom‘;

function Home() {
  const navigate = useNavigate();

  function goToContact() {
    navigate(‘/contact‘) 
  }

  return (
    <button onClick={goToContact}>
      Go to contact
    </button>
  )
}

Calling navigate will update the URL and render the matched route.

There are more advanced hooks like useResolvedPath, useMatch, etc but these core APIs are enough to get started.

Now let‘s put this all together into an example app!

React Routing Example App

To demonstrate React routing in a real app, we‘ll build a simple blog with:

• A Posts list view
• A single Post view
• Navigation between them

Here is the Mockup:

Live Demo: https://react-routing.netlify.app/

Let‘s walk through the implementation.

File Structure

Inside /src, we‘ll have:

• index.js – Entry point
• App.js – Main App component
• Navbar.js – Top navigation
• Home.js – Posts list view
• Post.js – Single post view

The index.js will render App component inside BrowserRouter:

// index.js

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

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById(‘root‘)
);

Defining Routes

Inside App.js, we‘ll set up routes:

// App.js

import { Routes, Route } from ‘react-router-dom‘;
import Home from ‘./Home‘;
import Post from ‘./Post‘;

function App() {
  return (
    <div className="container">
      <Navbar />
       <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:id" element={<Post />} />
      </Routes>
    </div>
  );
}

export default App;

• / will load the Home view
• /post/:id will load Post component

Home Page

The Home page will show a list of posts.

When a post is clicked, we‘ll use navigate to go to the /post/:id route dynamically.

// Home.js

import { useNavigate } from ‘react-router-dom‘;

const posts = [
  { id: 1, title: ‘Post 1‘ },
  { id: 2, title: ‘Post 2‘ },
]

export default function Home() {
  const navigate = useNavigate();

  return (
    <>


      {posts.map(post => (
        <p 
          key={post.id}
          onClick={() => navigate(`/post/${post.id}`)}
        >
          {post.title}
        </p>
      ))}
    </>
  )
}

Post Page

The Post page will get the id parameter from the URL to show the post details:

// Post.js 

import { useParams } from ‘react-router-dom‘;

export default function Post() {
  const { id } = useParams();
  const post = getPostById(id);

  return (

  );
}

function getPostById(id) {
  // code to get post by id
}

And that‘s it! The main routing functionality is done.

There are more things we could do:

• Add nested routes
• Use Outlet for nested view rendering
• Animate transitions
• Pass state across routes
• Lazy load components
• Protect routes
• Handle redirects
• And more!

But this covers the core ideas and APIs to get up and running with React routing.

The React Router docs are a great reference for advanced usage.

Server-side Rendering with React Router

By default, React apps with routing are client-side rendered only. This isn‘t ideal for SEO.

For server-side rendering (SSR) and SEO, React Router provides the StaticRouter component.

The basic idea is:

• Use BrowserRouter on client
• Use StaticRouter on server
• They share the same <Route> configuration

On the server, you pass the request URL to StaticRouter. This will match the routes and render them.

You can check out the React Router SSR docs for a detailed guide.

Next.js is another great option that handles SSR for you when using its routing.

Should You Use a Third-Party Router?

React Router is the standard solution for routing in React. For most cases, you should stick with it.

However, there are some alternatives with different tradeoffs to consider:

• Wouter – Tiny 1kb router focused on size
• Reach Router – Accessible routing from React Training
• Next.js – Framework with built-in routing and SSR
• Remix – Full-stack React framework from React Router creators

For simple apps, React Router DOM provides all you need. As your application grows, you may want to evaluate other solutions.

But you can build a wide range of apps just with React Router!

Conclusion

Hopefully this article gave you a solid grasp on routing React apps using react-router-dom!

Here‘s a quick summary of what we covered:

• Using <BrowserRouter>, <Routes>, <Route>, and <Link> for declarative routing
• Creating dynamic route parameters
• Programmatic navigation with useNavigate
• Building a sample app to demonstrate core routing concepts
• SSR with StaticRouter
• Overview of other routing libraries

React Router is a very powerful tool that really unlocks the potential of React!

Client-side routing makes apps feel responsive and native-like. And organizing UIs into routes helps structure code.

There‘s a lot more to dive into like advanced hooks, animations, scroll restoration and more. But this guide should give you a solid starting point to begin routing your React apps like a pro!