所有路由器的 React 6.4.0 通用标头答案

【问题标题】：React 6.4.0 common header for all the router所有路由器的 React 6.4.0 通用标头
【发布时间】：2022-10-16 01:43:59
【问题描述】：

我正在使用 react-router-dom 版本 6.4.0 开始反应项目，但无法为所有路由创建公共标头。

App.js - 这是我要添加的文件 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;

routes.js - 在这个文件中，我将创建所有路由

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 - 此文件是主页，其中包含指向其他页面的链接以及标题

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 - 它是正常的组件，它说

import React from "react";

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

export default About;

我希望 Home 和 About 组件都在顶部加载标题。

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

即使在react-router-dom@6.4.0 中，使用通用 UI 渲染布局路由仍然可以正常工作。

创建一个布局路由组件，用于渲染公共标头组件和一个 Outlet 用于嵌套路由。

例子：

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

在配置中的布局路径上导入并渲染Layout。

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

...

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

【讨论】：

【解决方案2】：

我尝试做类似的事情。不幸的是，只有组件出现在所有页面上。对不起纯英语。我的代码如下。

【讨论】：