React Router Guide - Basic Implementation

React Router is one of the most popular library for React and React Native for routing. It's a bit complicated to wrap the head around this library. So, in this article, we will break down everything we need to know about this library and try and create better understanding about this library.

So let's get started and dive into the usage of this library.

Installation

To install this library, there are two separate packages for React and React Native:

React:

npm i react-router-dom

React Native:

npm i react-router-native

This is the only difference for React and React Native, other than this the libraries are nearly identical.

Now that the library is installed, let us start with configuration.

Configuring the Router

Setup of your router is by far the simplest step. All you have to do is wrap your entire application with the router you specifically need to import (BrowserRouter for the web, NativeRouter for mobile).

import React from "react"
import ReactDOM from "react-dom/client"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

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

In most cases, your application's index.js page will import your router, which will then wrap your App component. The router functions exactly like a context in React and gives your application all the information it needs to perform routing and use all of React Router's custom hooks.

Route Defining

Define your routes using React Router next. The App component, for example, is typically where this is done at the top level of your application, but you may do it wherever.

import { Route, Routes } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"

export function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/books" element={<BookList />} />
    </Routes>
  )
}

For each route in your application, you just need to define a single Route component, which you then group together into a single Routes component. React Router will examine the routes specified in your Routes component if your URL changes, and it will render the content in the element prop of the Route with the path that matches the URL. If our URL in the example above was /books, the BookList component would be displayed.

The good thing about React Router is that it only updates the content of your Routes component when you switch between pages. The remaining text on your website will remain unchanged, improving both performance and user experience.

Handling Navigation

Handling navigation is React Router's last step. Anchor tags are typically used for navigation in applications, but React Router uses its own unique Link component instead. This Link component merely acts as a wrapper around an anchor tag, ensuring that all routing and conditional re-rendering are handled correctly so that you can use it in the same way as a standard anchor tag.

import { Route, Routes, Link } from "react-router-dom"
import { Home } from "./Home"
import { BookList } from "./BookList"
export function App() {
  return (
    <>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/books">Books</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<BookList />} />
      </Routes>
    </>
  )
}

Two links to the home page and the books page were included in our example. You'll also see that we set the URL using the to prop rather than the href prop that you're used to using with anchor tags. You must keep in mind that this is the only distinction between a Link component and an anchor tag because it is simple to unintentionally utilise a href prop rather than the to prop.

Another thing to keep in mind about our updated code is that the navigation we are rendering at the top of the page is outside our Routes component, which means that when we switch pages, only the content in the Routes component will change.

I sincerely hope that the majority of you find the approach covered here to be helpful. Thank you for reading, and please feel free to leave any comments or questions in the comments section below..