Create Router Component

Create Router Component
We should create separate rounter component. 
                   
                   import {
                      createBrowserRouter,
                      createRoutesFromElements,
                      Route,
                    } from 'react-router-dom';
                    import App from '../App';

                    import { ProductPage, HomePage } from '../pages';
                    import CartPage from '../pages/CartPage';

                    const AppRoute = createBrowserRouter(
                      createRoutesFromElements(
                         <Route path="/" element={ <App />}>
                           <Route index={true} element={ <HomePage />} />
                           <Route path="product/:pid" element={ <ProductPage />} />
                           <Route path="cart" element={ <CartPage />} />
                         </Route>
                      )
                    );

                    export default AppRoute;

Use Router Component

Router Component
Use Router Component in main.tsx 
                   
                    import React from 'react';
                    import ReactDOM from 'react-dom/client';
                    import { HelmetProvider } from 'react-helmet-async';
                    import { RouterProvider } from 'react-router-dom';
                    import './index.css';
                    import 'react-toastify/dist/ReactToastify.css';
                    import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
                    import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

                    import { AppRoute } from './routers';
                    import { StoreProvider } from './Store-Reducer/StoreProvider';

                    const queryClient = new QueryClient();
                    ReactDOM.createRoot(document.getElementById('root')!).render(
                      <React.StrictMode>
                        <StoreProvider>
                          <HelmetProvider>
                            <QueryClientProvider client={queryClient}>
                              <RouterProvider router={AppRoute} />
                              <ReactQueryDevtools initialIsOpen={false} />
                            </QueryClientProvider>
                          </HelmetProvider>
                        </StoreProvider>
                      </React.StrictMode>
                    );