Define private and public routes (React-Router v6)

routes.md

REACT ROUTER DOM V6 - Public and private routes

AppRouter.js:

import React from "react";
import { Routes, Route } from "react-router-dom";
import PrivateRoute from "routes/PrivateRoute";
import PublicRoute from 'routes/PublicRoute';
import { DashboardRoutes } from './DashboardRoutes';
import { PUBLIC_ROUTES, PRIVATE_ROUTES } from 'constants';

const RouterApp = () => {

// your condition: isAuthenticated 

const routes = isAuthenticated ? PRIVATE_ROUTES : PUBLIC_ROUTES;
  return (
      <Routes>
         <Route
          path='/*'
          element={
            <PublicRoute redirectToRoute={} >
              <DashboardRoutes routes={routes} />
            </PublicRoute>
          }
        />

        <Route
          path='/*'
          element={
            <PrivateRoute>
              <DashboardRoutes routes={routes} />
            </PrivateRoute>
          }
        />
      </Routes>
  );
};

export default RouterApp;

PublicRoute.js:

import PropTypes from 'prop-types'
import { Navigate } from 'react-router-dom';
import { ROUTES } from 'constants';

const PublicRoute = ({ children }) => {
  // your condition: isAuthenticated.

  if (isAuthenticated) { 
    return <Navigate to={ROUTES.HOME} />
  }
  
  return children;
};

export default PublicRoute;

PrivateRoute.js:

import React from "react";
import { Navigate } from "react-router-dom";
import { ROUTES } from 'constants';

const PrivateRoute = ({ children }) => {
   // your condition: isAuthenticated.

  if (!isAuthenticated) { 
      return <Navigate to={ROUTES.LOGIN} />
    }

  return children;
}

export default PrivateRoute;

DashboardRoutes.js:

import { Route, Routes } from 'react-router-dom';

export const DashboardRoutes = ({ routes }) => {
  return (
      <Routes>
        {routes.map(({ route, component: Component }) => (
          <Route exact path={route} element={<Component />} key={route} />
        ))}
      </Routes>
  );
};

Constants:

// Define paths
export const ROUTES = {
  HOME: '/home',
  PROFILE: '/profile',
  SETTINGS: '/settings',
  LOGIN: '/',
};

// Define routes
import { LoginPage, HomePage, ProfilePage, SettingsPage } from '../pages';
import { ROUTES } from './';

export const PUBLIC_ROUTES = [
  { route: ROUTES.LOGIN, component: LoginPage }
];

export const PRIVATE_ROUTES = [
  { route: ROUTES.HOME, component: HomePage },
  { route: ROUTES.PROFILE, component: ProfilePage },
  { route: ROUTES.SETTINGS, component: SettingsPage },
];