what is Routing?

Routing is a process in which a user is directed to different pages based on their action or request. ReactJS Router is mainly used for developing Single Page Web Applications.

To work with routers in React we have a package called "react-router-dom"

Installation of this Package:

npm i react-router-dom

It will install the latest version of react-router-dom i.e. at present v 6.11.2.

Adding a Router

The first thing to do is create a Browser Router and configure our first route. This will enable client-side routing for our web app.

Example: In index.js

import React from "react"
import ReactDOM  from "react-dom/client";
import {createBrowserRouter, RouterProvider} from "react-router-dom"

const root = ReactDOM.createRoot(document.getElementById("root"));

const mainRouter = createBrowserRouter([{}]);

root.render(
    <div>
        <RouterProvider router={mainRouter}/>
    </div>,root)

What we did here is -->

Imported both createBrowserRouter and RouterProvider.

Created the main router using createBrowserRouter.

createBrowserRouter allows us to define the routes as an array of objects in which we can specify a path, the element to be rendered when the path is browsed.

Provided this main router to RouterProvider which is already imported.

Creating three components for routing:

Home.jsx

import React from 'react'

export default function Home() {
  return (
    <div>
        <h1>hellooo</h1>
    </div>
  )
}

About.jsx

import React from 'react'

 const About = () => {
  return (
    <div>About</div>
  )
}

export default About;

Contact.jsx

import React from 'react'

 const Contact = () => {
  return (
    <div>Contact</div>
  )
}

export default Contact;

Importing these components in index.js:

import App from "./App";
import Home from "./Home";
import  About  from "./About";
import Contact from "./Contact";

We can define these routes in createBrowserRouter as an array of objects.

We have to provide a path and element to each and every component.

const mainRouter = createBrowserRouter([
    {
        path:'/',
        element:<App/>,
    },
    {
       path:'/about',
       element:<About/>
     },
     {
       path: '/contact',
       element:<Contact/>
      }
])

My Challenge here is:

I want to show the header and footer in all components.

Then what I have to do is make all other components as children of our main App component --->

const mainRouter = createBrowserRouter([
    {
        path:'/',
        element:<App/>,
        children: [
            {
                path:'/about',
                element:<About/>
            },
            {
                path: '/contact',
                element:<Contact/>
            }
        ]

    }
])

In App.js

import React from 'react'
import { Outlet } from 'react-router-dom';

const App = () => {
  return (
    <div>
        <header>Header</header>

        <Outlet/>


        <footer>Footer</footer>
    </div>
  )
}

export default App;

What's going on here is:

Whenever I hit /about route it will render all the content of the component in the Outlet here. And header and footer will remain constant in all routes.

Output on the web page when I hit / route:

Header
Footer

Output on the web page when I hit /about route:

Header
About
Footer

Output on the web page when I hit /contact route:

Header
Contact
Footer

But here the problem is if I want to render any other content in App.js it will be shown in all other child components also.

My Challenge here is to render content only specific to the App:

we have to add the home route as children of App and the path should be "/" the same as App.

 const mainRouter = createBrowserRouter([
    {
        path:'/',
        element:<App/>,
        children: [
            {
                path:'/',
                element:<Home/>
            }, 
            {
                path:'/about',
                element:<About/>
            },
            {
                path: '/contact',
                element:<Contact/>
            }
        ]

    }
])

Then whenever we hit "/" all the content which is there in the home component will render in the App.js Outlet with a header and footer.

Output when we hit the "/" route:

Header 
hellooo
Footer

Now "hellooo" won't render in all other routes.

Routing Types:

1. Client-Side Routing

2. Server Side Routing

Client-Side Routing: when we use link from react-router-dom for routing it doesn't reload the page and get renders only the content which changes.

Ex: <Link to="/"/>

Server Side Routing: With server-side routing when we use anchor tag it download an entire new webpage whenever you click on a link.

Ex: <a href="/"/>