Router in React

Router in React

Routing is one of the most important aspects of a modern single page application (SPA), as it determines what should appear when a user reaches a specific page within the application.

Single page applications are exactly what their name implies: a single page that appears to be numerous pages since it is made up of various components that render as independent pages.

The process and declaration of which specific components or pages the programme should render based on the URL, or route, is known as routing in single page applications.

When a user enters a URL or clicks an element (link, button, icon, image, etc.) within an application, they have the ability to travel between different portions of the application.

How to Install React Router

All you have to do to install React Router is run npm install react-router-dom@6 in your project terminal and wait for it to finish.

Use the command yarn add react-router-dom@6 if you're using yarn.

Set Up React Router

After you've finished installing React Router, the first thing you should do is make it accessible from wherever in your app.

Depending on the platform we're targeting, the react-router package includes a number of routers that we can use. BrowserRouter, HashRouter, and MemoryRouter are a few examples. The BrowserRouter and HashRouter are a fantastic fit for the browser-based apps we're working on.

The BrowserRouter is used for dynamic applications with a server that can handle any form of URL, whereas the HashRouter is used for static websites with a server that only replies to requests for files it knows about.

To accomplish this, open the src folder's index.js file and import BrowserRouter from react-router-dom, then wrap the root component (the App component) in it.

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

This is what you should have after making modifications with React Router:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

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

All we did was swap out React with something else. BrowserRouter was imported from react-router-dom and is in StrictMode. Now you can use the router functionalities from anywhere in your app.

How to Route to Other Components

Now that we've completed the setup, we'll look at routing to and rendering different components.

Let's create some components for learning how to route the components

We'll make the Home, About, and Contact components in the same way.

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

export default Home;

import React from 'react'

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

export default About

import React from 'react'

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

export default Contact

Define routes for connecting the components

We'll create all of our routes in the App component, which serves as the root component from which our React code is rendered.

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

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

export default App

The features we'll be employing – Routes and Route – were initially imported. After that, we imported all of the components to which a route needed to be attached. Let's have a look at the steps one by one.

Routes serves as a container/parent for all of the different routes that our app will construct. It is used to create a single route

Link to navigate to routes

We'll now go to other pages using a new React Router feature based on the routes and pathnames we specified in the App component. That is to say:

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;

The (a>) tag in HTML is analogous to the Link component. Its to attribute provides the path to which the link leads.

Conclusion: So there you have it, your journey into the React realm. We've started with Props in React to get you familiar with why you'd use in React and what you can do with it.