Protected Routes Using createBrowserRouter

App.jsx

import React, { useState } from 'react';
import {
  Navigate,
  RouterProvider,
  createBrowserRouter,
} from 'react-router-dom';
import Cart from './components/Cart';
import Home from './components/Home';
import Login from './components/Login';
import Orders from './components/Orders';
import Payment from './components/Payment';
import ProtectedRoute from './components/ProtectedRoute';

const App = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const updateStatus = () => {
    setIsLoggedIn((prev) => !prev);
  };

  const router = createBrowserRouter([
    {
      path: '/',
      element: <Home />,
    },
    {
      path: '/login',
      element: <Login updateStatus={updateStatus} />,
    },
    {
      path: '/orders',
      element: <ProtectedRoute isLoggedIn={isLoggedIn} />,
      children: [
        {
          path: '',
          element: <Orders />,
        },
      ],
    },
    {
      path: '/cart',
      element: <ProtectedRoute isLoggedIn={isLoggedIn} />,
      children: [
        {
          path: '',
          element: <Cart />,
        },
      ],
    },
    {
      path: '/payment',
      element: <ProtectedRoute isLoggedIn={isLoggedIn} />,
      children: [
        {
          path: '',
          element: <Payment />,
        },
      ],
    },
    {
      path: '*',
      element: <Navigate to='/' />,
    },
  ]);

  return <RouterProvider router={router} />;
};

export default App;

if suppose i have home screen and product screen and i want to go home screen to product screen but home screen will be main screen for example router should Home/Product how can i do this in react router dom v6

like this 👉🏻 : https://react.dev/reference/react/hooks