React : React Router Dom APIs (Nested routing, Outlet, useOutletContext, index, useNavigate, useParams) (useLocation, useRoutes)

Nested routing

Nested routing, also known as nested routes or nested routing hierarchy, refers to the concept of organizing routes in a hierarchical structure within a web application. It allows you to define routes that are nested inside other routes, creating a parent-child relationship between them.

 

In nested routing, child routes are rendered within the context of their parent route. This means that when a parent route is active or accessed, its child routes can be rendered and displayed within the parent's component or layout.

 

Nested routing is useful for building complex applications with multiple levels of hierarchy, such as dashboards, admin panels, or multi-page applications. It helps in structuring and organizing the application's navigation flow, separating concerns, and encapsulating functionality within specific route components.

 

Outlet

In the context of nested routes, an "Outlet" refers to a placeholder or target location where child components or content from nested routes can be rendered. It is a concept used in routing frameworks or libraries to define the place within a parent component where the content of child routes should be inserted.

The Outlet component acts as a container or insertion point within the parent component's JSX structure. When a nested route is active, the corresponding child component defined for that route will be rendered and inserted into the Outlet location.

 

 

nested routing / outlet / useOutletContext / index / useNavigate / useParams

https://dev.to/tywenk/how-to-use-nested-routes-in-react-router-6-4jhd

How to Use Nested Routes in React Router 6

 

useLocation

The useLocation hook returns an object containing various properties related to the current location, such as the pathname, search parameters, hash, and state. You can use these properties to perform different actions or make decisions based on the current URL.

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

const MyComponent = () => {
  const location = useLocation();

  console.log(location.pathname); // Retrieves the current pathname
  console.log(location.search); // Retrieves the query parameters
  console.log(location.hash); // Retrieves the hash part of the URL
  console.log(location.state); // Retrieves the state object (if any)

  return <div>My Component</div>;
};

export default MyComponent;

 

useRoutes

The useRoutes hook is used to define and render nested routes within a parent component. It takes an array of route objects as input and returns a component that matches and renders the corresponding child component for the active route.

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

import Home from './Home';
import About from './About';
import Contact from './Contact';
import Products from './Products';

const routes = [
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/contact',
    element: <Contact />
  },
  {
    path: '/products',
    element: <Products />,
    children: [
      { path: 'shirts', element: <Shirts /> },
      { path: 'pants', element: <Pants /> },
      { path: 'shoes', element: <Shoes /> }
    ]
  }
];

const App = () => {
  const element = useRoutes(routes);

  return (
    <div>
      {element}
    </div>
  );
};

export default App;

In this example, we define four routes: /, /about, /contact, and /products. The /products route has three child routes: /shirts, /pants, and /shoes. When the user navigates to a route, the corresponding component is rendered and displayed within the Outlet component defined in the parent component.

 

 

 

React : React Router Dom APIs (Nested routing, Outlet, useOutletContext, index, useNavigate, useParams) (useLocation, useRoutes)