How Routing Works in React🤔🤔

What is Routing!!!

Routing refers to the mechanism that enables navigation between different pages or views while maintaining a user-friendly and organized browsing experience.

Traditional Routing vs Routing in React

If you are coming from a vanilla js background then routing for you is creating multiple HTML pages and then linking it to a anchor tag. But in react it works differently, as we build components that are generally .jsx files. So the traditional method cannot be applied here.

Routing in React

Step 1: Install React Router DOM

So in react to implement routing, we use a package called react-router-dom. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL.

// Installing
npm i react-router-dom

Step 2: Importing Browser Router

After installing react-router-dom, now we have to import BrowserRouter from react-router-dom in our index.js file.

// Importing BrowserRouter in index.js
import { BrowserRouter } from "react-router-dom";

Step 3: Wrapping App with BrowserRouter

After importing BrowserRouter in index.js we have to wrap the App component with BrowserRouter.

// Wrapping App with BrowserRouter in index.js
root.render(
    <BrowserRouter>
    <App />
    </BrowserRouter>
);

Step 4: Create Pages

Now within the src folder, we'll create a folder named pages with 3 files:

src\pages\:

• Home.jsx

• Explore.jsx

• Contact.jsx

Adding basic code in our components:

// Home.jsx
export const Home = () => {
  return (
    <>
      <h1>This is Home page</h1>
    </>
  );
};

// Explore.jsx
export const Explore = () => {
  return (
    <>
      <h1>This is Explore page</h1>
    </>
  );
};

// Contact.jsx
export const Contact = () => {
  return (
    <>
      <h1>This is Contact page</h1>
    </>
  );
};

Step 5: Import Routes and Route in App.js

Now to create routes we will need to import Routes and Route from react-router-dom .

// importing Routes and Route in App.js
import { Routes, Route } from "react-router-dom";

Step 6: Creating Routes

Now that Routes and Route has been imported, we need to create routes i.e. path or URL pattern in a web application that maps to a specific content. Route has to be declared using 2 things, first is the path i.e. at which URL path you want your component to render. Second is the element i.e. which page you want to show at that specific path. The route we make has to be wrapped by Routes.

// Creating Routes in App.js
        <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/explore" element={<Explore />} />
        <Route path="/contact" element={<Contact />} />
        </Routes>

Step 7: Creating Links

Now that Routes have been defined we need to create links through which we can implement navigation around the application. Here we will use Link that has been provided by react-router-dom works like an HTML anchor tag.

//  Creating links in App.js
import {Link } from "react-router-dom";
         <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/explore">Explore </Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>

Final Result

Now, we can click on the links and navigate to different components. React Router keeps our application UI in sync with the changing URLs.