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.