<p>我正在使用 <code>react-router-dom</code> 版本 6.4.0 启动 React 项目，但无法为所有路由创建通用标头。</p>
<p>App.js - 这是我添加 <code>RouterProvider</code></p> 的文件
<pre class="brush:php;toolbar:false;">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;</pre>
<p>routes.js - 在此文件中我将创建所有路线</p>
<pre class="brush:php;toolbar:false;">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 />,
},
]);</pre>
<p>Home.js - 此文件是主页，其中包含指向其他页面的链接以及标题</p>
<pre class="brush:php;toolbar:false;">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;</pre>
<p>About.js - 这是一个普通的组件，表示关于</p>
<pre class="brush:php;toolbar:false;">import React from "react";
const About = () => {
return <div>About</div>;
};
export default About;</pre>
<p>我希望 <code>Home</code> 和 <code>About</code> 组件加载时标题位于顶部。</p>
1
858
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
即使在
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} />; }