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

Javascript – react-router-dom apply header to all routes

I am implementing react-router-dom to handle routing. The routing works for the most part however my Header component is not visible when the user visits AccountHome

My router is very simple:

const router = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
  },
  { path: "/account", element: <AccountHome /> },
]);

The header is found in the AppLayout file:

export const AppLayout = () => {
  const {
    isAuthenticated,
  } = useContext(AppContext);
  return (
    <div className="App">
      <Header />
      {isAuthenticated ? <HomePage /> : <LandingPage />}
      <Outlet />
    </div>
  );
};

I want the header to be visible on all pages. I feel like my implementation is close but I am misunderstanding how the Outlet works.

Tags:

2

Answers


  1. 0

    your code is simple and I guess that it should be OK but sometimes you should precision to other part of code for example you should sure about

    <RouterProvider router={router} />

    when use createBrowserRouter and maybe in your code has problem at this section :

    const {
    isAuthenticated,
  } = useContext(AppContext);

    please check that but in finally it should be OK

    Login or Signup to reply.
  2. 0

    The point of layout route components is for them to wrap nested routes, e.g. the nested routes render their element content into the layout’s Outlet.

    Move the "/account" route to be a child of the layout route.

    const router = createBrowserRouter([
  {
    path: "/",
    element: <AppLayout />,
    children: [
      { path: "/account", element: <AccountHome /> },
      // ... other routes that get the layout and header ...
    ],
  },

  // ... other routes that do not get the layout and header ...
]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search