Let’s find the Path in React

3 min readJan 9, 2024

UI components and single-page apps can be used by developers to design user interfaces with React, an open-source front-end JavaScript toolkit. Routing is one of the most crucial elements that we should always include while creating these applications.

Redirecting a user to different pages in response to their request or activity is known as routing. React routing uses an external package called React router, which might be challenging to set up if you’re not familiar with how it operates.

Routing Types:

Client-side Routing: It doesn’t make any network calls; it only loads that component in the browser.
Server-side Routing: If we click on routes and it makes a network call and fetches the data, and then it re-renders on our browser and refreshes the whole page, then it is called server-side routing.

For installing routers, we need to install react-router-dom.

The command for installation is:

# Using NPM
npm install react-router-dom

# Using Yarn
yarn add react-router-dom

# Using pnpm
pnpm add react-router-dom

How to set up React router

To use the React router in the browser environment, import BrowserRouter and wrap your root component as in the example below. BrowserRouter is a top-level component.

import React from "react";
import ReactDOM from "react-dom/client";
import Header from "./components/Header";
import Body from "./components/Body";
import About from "./components/About";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
const AppLayout = () => {
  return (
    <div className="app">
      <Header />
      <Body />
    </div>
  );
};
const appRouter = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
  },
  {
    path: "/about",
    element: <About />,
  },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={appRouter} />);

Children Routes

Outlet:

An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered.

If the parent route matches exactly, it will render a child index route, or nothing if there is no index route.

import React from "react";
import ReactDOM from "react-dom/client";
import Header from "./components/Header";
import Body from "./components/Body";
import About from "./components/About";
import Contact from "./components/Contact";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
const AppLayout = () => {
  return (
    <div className="app">
      <Header />
      <Outlet />
    </div>
  );
};
const appRouter = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    children: [
			{
        path: "/",
        element: <Body />,
      },
      {
        path: "/about",
        element: <About />,
      },
      {
        path: "/contact",
        element: <Contact />,
      },
    ],
  },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={appRouter} />);

Dynamic Routing

useParam: The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the <Route path>.

Child routes inherit all params from their parent routes.

As explained in the section above, you can declare a route with URL parameters so that React router dynamically captures the corresponding values in the URL when there is a match. It is useful when dynamically rendering the same component for multiple paths.

<Routes>
  <Route path="/blog/:id" element={<Blog />} /> 
</Routes>

Assuming you have the route above in your React router setup, you can retrieve the route parameters in the Blog component using the useParams hook. It returns an object. The object keys are the parameter names declared in the path string in the Route definition, and the values are the corresponding URL segment from the matching URL.

Error Page

For the error page, react-router-dom gives us access to an important hook. i.e. useRouterError. It will provide details of the error.

Let’s find the Path in React

How to set up React router​

Children Routes

Dynamic Routing

Error Page

Written by Baisali Pradhan

How to set up React router