reactjs - 布局路线无法按预期使用react-router-dom@6

Question

我正在与 [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>

我只得到页眉和页脚，没有“子”元素。可能是什么原因？

Answer 1

好的。问题解决了。布局页面应呈现 <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;