React Document

Search
Popular Search:

Routing in React
Preview linkOfficial link

Here we have used react-router-dom package for providing functionality to navigate to different pages without reloading pages.you can install it by running the following command in the terminal.

npm i react-router-dom

Why use React Router?

React Router, and dynamic, client-side routing, allows us to build a single-page web application with navigation without the page refreshing as the user navigates. React Router uses component structure to call components, which display the appropriate information.

By preventing a page refresh, and using Router or Link, which is explained in more depth below, the flash of a white screen or blank page is prevented. This is one increasingly common way of having a more seamless user experience. React router also allows the user to utilize browser functionality like the back button and the refresh page while maintaining the correct view of the application.

You can find router file on the following path:

Note:In our theme, we have numerous pages, due to which we have to create many paths. This becomes a tedious process after a while. To avoid this we have created a JSON files where writing paths is comparatively easy. Now we can loop through the array in this JSON file to create our routes dynamically.

theme >> src >> route >> index.jsx 

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import LayoutRoutes from './LayoutRoutes';

const Routers = () => {
  return(
    <BrowserRouter basename={'/'}>
      <Routes>
        <Route path={'/*'} element={<LayoutRoutes />} />
      </Routes>
    </BrowserRouter>
  )
}
export default Routers;

You can find router file on the following path:

theme >> src >> route >> LayoutRoutes.jsx 

import React, { Fragment, } from 'react';
import { Route, Routes } from 'react-router-dom';
import { routes } from './Routes';
import Layout from '../Layout/Layout';

const LayoutRoutes = () => {
  return (
    <Fragment>
      <Routes>
        {routes.map(({ path, Component }, i) => (
          <Route element={<Layout />} key={i}>
            <Route path={path} element={Component} />
          </Route>
        ))}
      </Routes>
    </Fragment >
  );
};

export default LayoutRoutes;

In Routes You can find router file on the following path:

theme >> src >> route >> Routes.jsx 

import Default from '../Pages/DashBoard/Default/Default';
import Ecommerce from '../Pages/DashBoard/Ecommerce/index';
import Crypto from '../Pages/DashBoard/Crypto';

export const routes = [
    { path: `${process.env.PUBLIC_URL}/dashboard/default/`, Component: <Default /> },
    { path: `${process.env.PUBLIC_URL}/dashboard/ecommerce/`, Component: <Ecommerce /> },
    { path: `${process.env.PUBLIC_URL}/dashboard/crypto/`, Component: <Crypto /> },
]

belong component to routes, then you need to add new object in routes array which is present in file theme >> src >> route >> Routes.jsx .When you add new object ,then your routes be will be created dynamically. Now we just need to add a link in the sidebar to navigate to that page.Note: If we want to add new Routes and belong component to routes, then you need to add new object in routes array which is present in file theme >> src >> route >> Routes.jsx .When you add new object ,then your routes be will be created dynamically. Now we just need to add a link in the sidebar to navigate to that page.