Estoy comenzando un proyecto de reacción con la versión 6.4.0 react-router-dom , pero no puedo crear un encabezado común para todas las rutas.

App.js: este es el archivo donde estoy agregando RouterProvider

 import logo from './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";

function App() {
 return (
 <RouterProvider router={routers}>
 <div>Header</div>
 <Outlet />
 </RouterProvider>
 );
}

export default App;

route.js - En este archivo voy a crear todas las rutas

 import { createBrowserRouter, redirect } from "react-router-dom";
import About from "../pages/About/About";
import Home from "../pages/Home/Home";
import { getUser, isAuthenticated } from "../sso/authUtil";

const authLoader = () => {
 if (!isAuthenticated()) {
 return redirect("https://google.com");
 } else {
 return getUser();
 }
};

export const routers = createBrowserRouter([
 {
 path: "/",
 element: <Home />,
 loader: authLoader,
 },
 {
 path: "/about",
 element: <About />,
 },
]);

Home.js: este archivo es la página de inicio que tendrá los enlaces a otras páginas junto con el encabezado

 import React from "react";
import { Link, Outlet, useLoaderData } from "react-router-dom";

const Home = () => {
 const loaderData = useLoaderData();

 return (
 <>
 <div>Header</div>
 <Link to="/">Home</Link>
 <Link to="/about">About</Link>
 <div>Home: {loaderData}</div>{" "}
 <Outlet />
 </>
 );
}
 
export default Home;

About.js - Es un componente normal que dice acerca de

 import React from "react";

const About = () => {
 return <div>About</div>;
};

export default About;

Quiero que tanto el componente Home como About de se carguen con el encabezado en la parte superior.