I am trying to use react-router-dom to handle my React app navigation. I am running into some issues using the standard useNavigate
function because my Header component is outside the Router.
I am trying to restructure the app to move my header inside the Router but when I do this the header does not appear.
Currently my header is rendered in my index.js file:
<AppProvider>
<Header />
<AppRoutes />
</AppProvider>
The AppRoutes
uses createBrowserRouter
:
import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import { Header } from "./Header";
import { AppLayout } from "./AppLayout";
import { AccountHome } from "./pages/AccountHome/AccountHome";
const router = createBrowserRouter([
{
path: "/",
element: <AppLayout />,
},
{ path: "/account", element: <AccountHome /> },
]);
export const AppRoutes = ({ auth }) => {
return <RouterProvider router={router} />;
};
And AppLayout
uses Outlet
:
export const AppLayout = () => {
const {
isAuthenticated,
isPricingModalOpen,
pricingOptions,
setIsPricingModalOpen,
} = useContext(AppContext);
return (
<>
<PricingModal
isPricingModalOpen={isPricingModalOpen}
pricingOptions={pricingOptions}
setIsPricingModalOpen={setIsPricingModalOpen}
/>
{isAuthenticated ? <HomePage /> : <LandingPage />}
<Outlet />
</>
);
};
I tried moving the Header into my AppLayout
but then the header doesn’t appear on AccountHome