Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – how to use createBrowserRouter in react + react router dom?

In my application I am using BrowserRouter component to render my routes or components . But I want to use loader functionality. but my current approach I am not able to use that feature.

 <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>

As suggested by below link I need to use createBrowserRouter function .
why loader function not called in react js?
https://reactrouter.com/en/main/routers/picking-a-router

current way of routing.

export default function AppRoutes() {
  return (
    <Layout>
      <Routes>
        <Route element={<RequireAuth />}>
          <Route
            path={'/'}
            element={
              <React.Suspense
                fallback={<div>loading</div>}
                children={<Booking />}
              />
            }
          ></Route>
        </Route>
        <Route element={<RequireAuth />}>
          <Route
            path={'/app'}
            element={
              <React.Suspense
                fallback={<div>loading</div>}
                children={<App />}
              />
            }
          ></Route>
        </Route>
      </Routes>
    </Layout>
  );
}

now I am trying to refactor my routing using createBrowserRouter .. I tried like this

const router = createBrowserRouter([
  {
    path: '/',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
  {
    path: '/app',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
]);

how to render component (Booking and App component). how I will render children in createBrowserRouter approach any idea ??

here is my code
https://stackblitz.com/edit/vitejs-vite-6gg4ab?file=src%2FApp.tsx,src%2Fmain.tsx,src%2Findex.css,src%2Froutes.tsx,src%2Flayout.tsx,src%2FRequireAuth.tsx,src%2Fbrowser-routes.tsx&terminal=dev

Tags:

2

Answers


  1. 0

    To render children to any path you do this: Using Booking app as example child

    
const router = createBrowserRouter([
  {
    path: '/',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
    children: [
      {
        path: '/Booking',
        element: <Booking />,
      }
    ]
  },
  {
    path: '/app',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
]);

    You can find very illustrative examples on their documentation here https://reactrouter.com/en/main/start/tutorial

    Login or Signup to reply.
  2. 0

    The createBrowserRouter function takes an array of RouteObject types

    export interface NonIndexRouteObject {
  caseSensitive?: AgnosticNonIndexRouteObject["caseSensitive"];
  path?: AgnosticNonIndexRouteObject["path"];
  id?: AgnosticNonIndexRouteObject["id"];
  loader?: AgnosticNonIndexRouteObject["loader"];
  action?: AgnosticNonIndexRouteObject["action"];
  hasErrorBoundary?: AgnosticNonIndexRouteObject["hasErrorBoundary"];
  shouldRevalidate?: AgnosticNonIndexRouteObject["shouldRevalidate"];
  handle?: AgnosticNonIndexRouteObject["handle"];
  index?: false;
  children?: RouteObject[];
  element?: React.ReactNode | null;
  hydrateFallbackElement?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  HydrateFallback?: React.ComponentType | null;
  ErrorBoundary?: React.ComponentType | null;
  lazy?: LazyRouteFunction<RouteObject>;
}

export type RouteObject = IndexRouteObject | NonIndexRouteObject;

    The children property takes another array of RouteObject objects, so you can use this recursive structure to build up your routing hierarchy.

    To convert the first code snippet using the BrowserRouter to the new Data Router syntax I suggest the following refactor that:

    1. Converts Layout to a layout route component

      Layout.tsx

      import { Outlet } from 'react-router-dom';

export default function Layout() {
  return (
    <div>
      Layout
      <Outlet />
    </div>
  );
}

    2. Renders a single layout route rendering RequireAuth, this makes for code that is a bit more DRY

    3. Renders Booking and App on nested routes under the auth layout route

      routes.tsx

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

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      {
        element: <RequireAuth />,
        children: [
          {
            path: '/',
            loader: () => {
              console.log('0000');
              return 'ss';
            },
            element: (
              <React.Suspense
                fallback={<div>loading</div>}
                children={<Booking />}
              />
            ),
          },
          {
            path: '/app',
            loader: () => {
              console.log('0000');
              return 'ss';
            },
            element: (
              <React.Suspense
                fallback={<div>loading</div>}
                children={<App />}
              />
            ),
          },
        ],
      },
    ],
  },
]);

export default router;

    4. Update main.tsx to render a RouterProvider and the computed router instead of the BrowserRouter component

      main.tsx

      import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import './index.css';
import router from './routes';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search