Just like a rollercoaster ride, React Router takes us on a thrilling journey through our web applications, providing the routes we need to travel between different pages and components. Much like navigating a theme park, React Router allows us to jump to different areas of our application, surf around, and explore new features. In this blog series, we'll dive deep into the world of React Router, exploring its features, tips, and best practices to make the most out of this essential tool in the React ecosystem.

React Router vs React Router Dom

React Router is a library and React Router Dom is used for the webpages , while learning about react router dom we need a some features such as lets talk about Link tag first .

Link : this is used as a place <a> tag as it will refresh the whole page and in react we don't have the concept of that instead we use the diffing algo right .

Navlink : It's similar to the regular Link but the main use of NavLink is to provide a visual indication of the active link, which can be useful for highlighting the current page in your navigation bar or menu. NavLink adds an activeClassName prop that allows you to specify a CSS class to apply to the link when it's active, making it easy to style the active link differently from other links.

• Here we get the callback function in className where we give the functionality of whether we are at our desired webpage or not !!!

<Link
    to="#"
    className="text-white bg-orange-700 hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 focus:outline-none"
  >
    Get started
</Link>
<NavLink
  className={({isActive}) =>
         `block py-2 pr-4 pl-3 duration-200 border-b
          ${isActive ? "text-orange-700" : "text-gray-700"} border-gray-100 hover:bg-gray-50 lg:hover:bg-transparent lg:border-0 hover:text-orange-700 lg:p-0`
}
 >
Home
</NavLink>

Outlet : when you want to surf through as many webpages but some of the components will remain constant , the outlet comes into a role and is used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered .

    import React from 'react'
    import Footer from './components/Footer/Footer'
    import Header from './components/Header/Header'
    import { Outlet } from 'react-router-dom'
    function Layout() {
        return (
            <>
            <Header/>
            <Outlet/>
            <Footer/>
            </>
        )
    }

    export default Layout

Implementing the router :
In React-Router DOM we are getting RouterProvider and createBrowserRouter

createBrowserRouter is a function in which we can give path for the routing and also add the children .

RouterProvider is a function which provides the routing functionality to the components within its subtree .

const router = createBrowserRouter([
  {
    path : "/",
    element : <Layout/>,
    children : [
      {
        path : "home",
        element : <Home/>
      },
      {
        path : "about",
        element : <About/>
      },
      {
        path : "contact",
        element : <Contact/>
      }
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>,
)

Loader : The name itself says right ! , so function of loader is to indicates to the user that something is happening in the background, such as loading data or transitioning between pages.
We need a loader in order to fetch any data from a server or to perform any time-consuming task it will tell us to wait until it get rendered .
we get useLoaderData hook from it !