React 6.4.0 Gemeinsame Header für alle Router
<p>Ich starte ein React-Projekt mit <code>react-router-dom</code>, kann aber keinen gemeinsamen Header für alle Routen erstellen. </p>
<p>App.js – Dies ist die Datei, in der ich <code>RouterProvider</code></p> hinzugefügt habe.
<pre class="brush:php;toolbar:false;">Logo importieren aus './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } aus „react-router-dom“;
import { routers } from "./routes/routes";
Funktion App() {
zurückkehren (
<RouterProvider router={routers}>
<div>Kopfzeile</div>
<Auslass />
</RouterProvider>
);
}
Standard-App exportieren;</pre>
<p>routes.js – In dieser Datei werde ich alle Routen erstellen</p>
<pre class="brush:php;toolbar:false;">import { createBrowserRouter, redirect } from "react-router-dom";
import About from "../pages/About/About";
Startseite importieren von „../pages/Home/Home“;
import { getUser, isAuthenticated } from "../sso/authUtil";
const authLoader = () =>
if (!isAuthenticated()) {
Return Redirect("https://google.com");
} anders {
return getUser();
}
};
export const routers = createBrowserRouter([
{
Pfad: "/",
Element: <Home />,
Lader: authLoader,
},
{
Pfad: "/about",
Element: <Über />,
},
]);</pre>
<p>Home.js – Diese Datei ist die Startseite und enthält Links zu anderen Seiten sowie den Titel </p>
<pre class="brush:php;toolbar:false;">import React from "react";
import { Link, Outlet, useLoaderData } aus „react-router-dom“;
const Home = () =>
const loaderData = useLoaderData();
zurückkehren (
<>
<div>Kopfzeile</div>
<Link to="/">Home</Link>
<Link zu="/about">Über</Link>
<div>Home: {loaderData}</div>{"
<Auslass />
</>
);
}
Standard-Startseite exportieren;</pre>
<p>About.js – Dies ist eine normale Komponente, die ungefähr </p>
<pre class="brush:php;toolbar:false;">import React from "react";
const About = () =>
return <div>About</div>;
};
Standard exportieren Über;</pre>
<p>Ich möchte, dass die Komponenten <code>Home</code> beim Laden oben stehen. </p>