Skip to main content

Setting up React Router (Part 1): Installing and Configuring the Router #89

📖 Introduction​

Following our exploration of custom hooks, this article begins a new series on a fundamental aspect of single-page applications: routing. We will be using React Router, the de facto standard library for routing in React. In this first part, we will cover installing and configuring the router.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • A working React development environment.
  • npm or yarn for installing packages.
  • Basic understanding of React components.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The "Why" of React Router: Understanding the need for a routing library in a single-page application.
  • ✅ Installation: How to install React Router into your project.
  • ✅ Core Implementation: How to set up the basic configuration of React Router using BrowserRouter, Routes, and Route.

🧠 Section 1: The Core Concepts of React Router​

In a traditional multi-page application, navigating to a new page involves a full page reload from the server. In a single-page application (SPA), however, the application is loaded once, and subsequent "pages" are rendered dynamically on the client-side.

React Router is a library that allows us to manage this client-side routing. It enables us to have multiple "views" or "pages" in our application, each with its own unique URL, without the need for a full page reload.

💻 Section 2: Deep Dive - Installation and Configuration​

Let's get started with installing and configuring React Router.

2.1 - Installation​

First, you need to install React Router in your project. Open your terminal and run the following command:

npm install react-router-dom

2.2 - Basic Configuration​

The core of React Router is made up of three components:

  1. BrowserRouter: This component should wrap your entire application. It uses the HTML5 history API to keep your UI in sync with the URL.
  2. Routes: This component is where you will define all of your individual routes.
  3. Route: This component is used to define a single route. It has a path prop to specify the URL path and an element prop to specify the component to render.

Let's set up a basic configuration in your src/index.js and src/App.js files.

src/index.js

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>
);

src/App.js

import React from 'react';
import { Routes, Route } from 'react-router-dom';

// You would create these components in separate files
const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;
const Contact = () => <h1>Contact</h1>;

function App() {
  return (
    <div>
      {/* Navigation would go here */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

export default App;

Step-by-Step Code Breakdown:

  1. In src/index.js, we wrap our <App /> component with the <BrowserRouter /> component.
  2. In src/App.js, we use the <Routes /> component to define our routes.
  3. Inside <Routes />, we use the <Route /> component to define each individual route.

Now, if you run your application and navigate to /, /about, or /contact, you will see the corresponding component rendered.

💡 Conclusion & Key Takeaways​

In this article, we've learned how to install and configure React Router. We've seen how to use the BrowserRouter, Routes, and Route components to set up basic routing in a React application.

Let's summarize the key takeaways:

  • React Router is a library for managing client-side routing in React applications.
  • The BrowserRouter component should wrap your entire application.
  • The Routes and Route components are used to define your application's routes.

Challenge Yourself: To solidify your understanding, try to create a new route for a "Portfolio" page and add it to the application.

➡️ Next Steps​

You now have a basic understanding of how to set up React Router. In the next article, "Setting up React Router (Part 2)", we will take a deeper dive into the BrowserRouter component and explore some of its configuration options.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Routing: The process of navigating between different views or pages in an application.
  • Single-Page Application (SPA): A web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
  • Client-Side Routing: The process of handling routing on the client-side (in the browser) rather than on the server.

Further Reading​