Skip to main content

Creating Routes

Defining Routes​

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <p>about</p>,
  },
]);

OR

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      { path: "/", element: <HomePage /> },
      { path: "/about", element: <p>About</p> },
      { path: "/search", element: <p>Search</p> },
      { path: "/basket", element: <p>Basket</p> },
    ],
  },
]);

Adding in the App component​

const App = (): React.JSX.Element => {
  return <RouterProvider router={router} />;
};

Creating Page Layout​

This code represents the layout of the app when there is some common components throughout the whole website. The common part is listed in Layout component and the unique part is defined in the Outlet component.

const Layout = (): React.JSX.Element => {
  return (
    <>
      <NavigationBar />
      <Outlet />
    </>
  );
};