6. Routing in React.js

1. Intoduction To React Router DOM

   React Router is a popular library for handling navigation in React applications. It enables SPA (Single Page Application) that update the UI without reloading the page.

2. Installations and Basic setup

   1. Install react router dom

npm install react-router-dom

2. Wrap entire Application in BrowserRouter for routing

//inside index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import { Toaster } from 'react-hot-toast';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <Toaster/>
      <App />
   </BrowserRouter>
  </Provider>
);

3. Define Diffrent pages for navigation

// In app .js

<Routes>
        <Route path='/' element={<Home/>}/>   
        <Route path='/login' element={ <Login/>}/>
        <Route path='/signup' element={ <Signup/>}/>
        <Route path='/verify-email' element={<VerifyEmail/>} />
        <Route path='/contact' element={<Contact/>}/>
<Routes/>

3. Types of Routes in React

   1. Static and dynimic routes

   Static Routing: The routes are predefined at build time. (Example : see just above)
   Dynamic Routing: The routes change based on data or user actions.

    //example of dynimic route
    import {  Routes, Route, useParams } from "react-router-dom";
    function UserProfile() {
      const { id } = useParams();
      return <h2>User Profile for ID: {id}</h2>;
    }
    function App() {
      return (
          <Routes>
            <Route path="/user/:id" element={<UserProfile />} />
          </Routes>
      );
    }
    export default App;
   
    // URL Example: http://localhost:3000/user/101
    // Output: User Profile for ID: 101
   

   2. Nested Routes

   Nested Routes allow a parent-child route relationship.

   <Outlet /> is used inside the parent component to render child routes.

function App() {
  return (
      <Routes>
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="/dashboard/profile" element={<Profile />} />
          <Route path="/dashboard/settings" element={<Settings />} />
        </Route>
      </Routes> 
  );
}

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <Outlet /> // here profile and settings are rednerd.
    </div>
  );
}

3. Private and Public routes (RBAC - Role-Based Access Control)

Open Routes: For Unauthenticated user only

Private Routes: Require authentication.
Public Routes: Can be accessed by anyone.

<Route path='/' element={<Home/>}/> // public route accessed by anyone
<Route path='/signup' element={<OpenRoute><Signup/> </OpenRoute>}/> // open route accessed by only unauthenticated users
<Route element={<PrivateRoute><Dashboard/></PrivateRoute>}> // For authenticated users only after verifying JWT Token

const PrivateRoute = ({children}) => {  // here childeren is <DashBoard/>
    const {token} = useSelector((state)=>state.auth)

    if(token !== null){
        return children
    }
    else{
        <Navigate to='/login'/>
    }
}


const OpenRoute = ({children}) => {

    const{token} = useSelector((state)=>state.auth);
    console.log(token)

      if(token===null){
        return children
      }
      else{
        return <Navigate to='/dashboard/my-profile'/>
      }
}

Role-Based-Access-Control(RBAC) :

Ex: User Login as a Student or as a Instructor

<Route element={<PrivateRoute><Dashboard/></PrivateRoute>}>
            <Route path ='/dashboard/my-profile' element={<MyProfile/>}/> // access by botth Instcrutor and student
            <Route path='/dashboard/settings' element={<Settings/>}/>

            {
              user?.accountType === ACCOUNT_TYPE.STUDENT &&(
                <> 
                <Route path='dashboard/enrolled-courses' element={<EnrolledCourses/>}/>
                <Route path='dashboard/cart' element={<Cart/>} />
                </>           
              ) 
            }

            {
              user?.accountType === ACCOUNT_TYPE.INSTRUCTOR  && (
                <>
                  <Route path='dashboard/instructor' element={<Instructor/>}/>
                  <Route path="dashboard/add-course" element={<AddCourse/>}/>
                  <Route path="dashboard/my-courses" element={<MyCourses />} />
                  <Route path="dashboard/edit-course/:courseId" element={<EditCourse />} />

                </>
              )
            }

4. React Router Hooks

   1. useNavigate() : Used for navigating from one page to another

   2. useLocation(): Useful for conditional rendering based on the current route.

      import { useLocation } from "react-router-dom";
      
      function CurrentLocation() {
      const location = useLocation();
      
      return <p>Current Path: {location.pathname}</p>;
      }
      

   3. useParams(): Retrieves route parameters from the URL.

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

function UserProfile() {
  const { userId } = useParams(); // Extract `userId` from the URL

  return <h2>User ID: {userId}</h2>;
}

// Route Defination
<Route path="/user/:userId" element={<UserProfile />} />

4. useSearchParams(): Handles query parameters in URLs (e.g., ?search=React).

5. <Link> vs <NavLink>

   Both <Link> and <NavLink> are used for client-side navigation, but NavLink provides additional styling capabilities.

   1. Link:

   • Basic navigation without any styling.

   • Example:

   •   <Link to="/about">Go to About</Link>
     

2. NavLink:

   • Similar to <Link>, but allows styling for active routes.

   • Example:

   •   <NavLink to="/about" activeClassName="active">
         About
       </NavLink>
     

In newer versions of React Router, use the className function:

        <NavLink to="/about" className={({ isActive }) => (isActive ? "active" : "")}>
          About
        </NavLink>

• Use Link when you just need navigation without styling.

• Use NavLink when you need to highlight the active link in a navbar or menu.

6. Handling 404 Not Found Page

    <Route path="*" element={<h2>404 - Page Not Found</h2>} />
   

Optimizing Routing Performance

Use Lazy Loading for Routes

Interview Questions

1. Difference between Static and Dynamic Routing?

   • Static Routing: Predefined at build time.

   • Dynamic Routing: Changes based on user input (useParams()).

2. What happens if no route matches the URL?

   A wildcard route (*) should be defined to show a 404 page.

3. What is the difference between useParams() and useLocation()?

   • useParams(): Access dynamic route parameters (e.g., /user/:id).

   • useLocation(): Get the current URL, pathname, and state.