WriteTech Hub Publication
How to Implement The React Router

How to Implement The React Router

Okafor Johnson's photo
Okafor Johnson
·

6 min read

Table of contents

Requirements

Here are some necessities needed to complete this project

  • Node version 14+ and NPM version 5.6+ installed

  • Command Line Interface (I will be using PowerShell)

  • Basic JavaScript Knowledge

  • Basic Reactjs knowledge

  • Basic Bash Scripts Knowledge

  • Strong Internet connection

Getting Started

React.js is a prevalent library for JavaScript Developers. In React.js, it's an essential concept to Route a front-end application, and today, I want you to learn how to do this by using React Router v4. For React.js apps, we're going to see declarations of responsive routing.

React Router provides features for creating dynamic URLs. You can define parameters in your routes, such as product ID or category, which will generate dynamic URLs depending on the parameters the user passes in. This allows for easy user navigation and makes your application look more professional.

What is React-Router

React Router is a powerful library for routing in React applications that allows developers to create single-page experiences and declarative routing. React Router can be used in your application to control the content that users see, create dynamic URLs, and link the application together.

With React Router, you can define routes and map them to specific components. When a user navigates to a particular URL or clicks on a link, React Router ensures that the appropriate component is rendered without a full page reload. This makes your application feel faster and more responsive, as only the necessary components are updated.

Key Components

React Router provides several vital components to build a routing system:

But first, let's create an App component

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to A Simple React Component!</h1>
      <p>This is a basic component.</p>
    </div>
  );
}

And then, create your index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Then, install your React-router

Install your React-router

React makes use of an external library to handle routing; however, before we can implement routing with that library, we must first install it in our project, which is accomplished by running the following command in your terminal (within your project directory):

npm install react-router-dom@6

After successfully installing the package, we can set up and configure react-router within our project.

Firstly we add our BrowserRouter to our index.js component

BrowserRouter: This component is responsible for managing the routing in your application using the HTML5 history API. It listens to changes in the URL and renders the appropriate component based on the current URL.

Your index.Js should look like this after importing your BrowserRouter

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

We are finally done setting things up, so now we'll look at routing to and rendering different components.

Configure Routes

We would first create those components, in our case, three pages: the Home page, the About Page, and the Contacts Page. This GitHub repository contains the content for these pages. Once those pages are properly configured, we can now set up and configure our routes in the App file, which serves as the foundation for our React application

Create multiple Components

Create the homepage

function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
    </div>
  );
}

export default Home;

Create the About component

import React from 'react'

function About() {
    return (
        <div>
            <h1>This is the about page</h1>
        </div>
    )
}

export default About

Create the contact component

import React from 'react'

function Contact() {
    return (
        <div>
            <h1>This is the contact page</h1>
        </div>
    )
}

Routes

This component defines a mapping between a URL path and a React component. It specifies which component should be rendered when the URL matches a particular path.

Don't worry if this does not make much sense – you'll understand better after looking at the example below.

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


const App = () => {
return (
   <>
      <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/contacts" element={<Contacts />} />
         <Route path="/about" element={<About />} />
      </Routes>
   </>
);
};


export default App;

We first imported the features using –Routes and Route. After that, we imported all the components to attach a route to. Now let's break down the process.

Routes act as a container/parents for all the individual routes created in our app.

Route is used to create a single route. It takes in two attributes:

  • Path, which specifies the URL path of the desired component. You can call this pathname whatever you want. Above, you'll notice that the first pathname is a backslash (/). Any component whose pathname is a backslash will get rendered first whenever the app loads for the first time. This implies that the Home component will be the first to be rendered.

  • Elements, which specify the component the route should render.

All we have done now is define our routes and their paths and attach them to their respective components

We will now use a different React Router feature to navigate to other pages based on those routes and pathnames we created in the App component.

They are called “Link” and ‘NavLink”.

Link and NavLink: These components create links to different routes in your application. They generate anchor tags (<a>) that trigger the navigation without causing a full-page reload

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>This is the home page</h1>
      <Link to="about">Click to view our about page</Link>
      <Link to="contact">Click to view our contact page</Link>
    </div>
  );
}

export default Home;

Recall that we created the pathnames listed in the App component, so when you click on the link, it will look through your routes and render the component with the corresponding pathname.

Conclusion

At this point, we have seen how to install, set up and use the basic features of React Router to navigate to different pages in your app. This covers the basics for getting started, but there are many cooler features.

You can learn more about the react-router here

react routerReactJavaScriptReact Router 6router