React 6.4.0 En-têtes communs pour tous les routeurs

Question

Je démarre un projet React en utilisant react-router-dom version 6.4.0 mais je ne parviens pas à créer un en-tête commun pour toutes les routes.

App.js - C'est le fichier dans lequel j'ai ajouté RouterProvider

importer le logo depuis './logo.svg';
importer './App.css';
importer { Link, Outlet, RouterProvider } depuis "react-router-dom" ;
importer des {routeurs} depuis "./routes/routes" ;

fonction App() {
  retour (
    <RouterProvider router={routers}>
      <div>En-tête</div>
      <Sortie />
    </ProviderRouteur>
  );
}

exporter l'application par défaut ;

routes.js - Dans ce fichier, je vais créer toutes les routes

import { createBrowserRouter, redirect } depuis "react-router-dom";
importer À propos de "../pages/About/About" ;
importer la page d'accueil depuis "../pages/Home/Home" ;
import { getUser, isAuthenticated } depuis "../sso/authUtil" ;

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

exporter les routeurs const = createBrowserRouter ([
  {
    chemin : "/",
    élément : <Accueil />,
    chargeur : authLoader,
  },
  {
    chemin : "/à propos",
    élément : <À propos de />,
  },
]);≪/pré>
<p>Home.js - Ce fichier est la page d'accueil et contient des liens vers d'autres pages ainsi que le titre</p>
<pre class="brush:php;toolbar:false;">importer React depuis "react" ;
importer { Link, Outlet, useLoaderData } depuis "react-router-dom" ;

const Accueil = () =>
  const loaderData = useLoaderData();

  retour (
    ≪>
      <div>En-tête</div>
      <Lien vers="/">Accueil</Lien>
      <Lien vers="/à propos de">À propos de</Lien>
      <div>Accueil : {loaderData}</div>{""}
      <Sortie />
    ≪/>
  );
}
 
exporter la page d'accueil par défaut ;

About.js - Il s'agit d'un composant normal qui représente about

importer React depuis "react" ;

const À propos de = () =>
  return <div>À propos</div>;
} ;

exporter par défaut À propos ;

Je souhaite que les composants Accueil et À propos aient le titre en haut lors de leur chargement.

Answer 1

Même en react-router-dom@6.4.0, le routage avec la disposition de rendu générique de l'interface utilisateur fonctionne toujours correctement.

Créez un composant d'itinéraire de mise en page qui restitue le composant d'en-tête commun et un pour les itinéraires imbriqués Outlet.

Exemple :

const Layout = () => (
  <>
    <CommonHeader />
    <Outlet />
  </>
);

Importé et rendu sur le tracé du tracé dans la configuration Layout.

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

...

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