我正在与 [email protected] 合作。 当尝试手动用“DefaultLayout”元素包装我的元素时,一切似乎都正常:
<Route path="/privacy" element={<PageLayout><Privacy /></PageLayout>} />
<Route path="/tos" element={<PageLayout><Tos /></PageLayout>} />
但是,当尝试使用时:
<Route element={<PageLayout />}>
<Route path="/privacy" element={<Privacy />} />
<Route path="/tos" element={<Tos />} />
</Route>
我只得到页眉和页脚,没有“子”元素。 可能是什么原因?
最佳答案
好的。问题解决了。
布局页面应呈现 <Outlet />
使其发挥作用的元素。
它是这样的:
** 默认布局 **
import React from "react";
import { Header } from "./partials/Header";
import { Footer } from "./partials/Footer";
import { Outlet } from "react-router-dom";
export const DefaultLayout = () => {
return (
<div className="default-layout">
<header className="header">
<Header />
</header>
<main className="main">
<Outlet />
</main>
<footer className="footer">
<Footer />
</footer>
</div>
);
};
** app.js **
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { DefaultLayout } from "./components/layout/DefaultLayout";
import { AddTicket } from "./pages/add-ticket/AddTicket";
import { Dashboard } from "./pages/dashboard/Dashboard";
import { Entry } from "./pages/entry/Entry";
import { TicketList } from "./pages/ticket-list/TicketList";
import { Ticket } from "./pages/ticket/Ticket";
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Entry />} />
<Route element={<DefaultLayout />}>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/tickets" element={<TicketList />} />
<Route path="/ticket" element={<Ticket />} />
<Route path="/add-ticket" element={<AddTicket />} />
</Route>
</Routes>
</Router>
);
}
export default App;
关于reactjs - 布局路线无法按预期使用react-router-dom@6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70419359/