reactjs - 使用 React Router 6v 呈现具有不同样式(例如 Navbar)的 React 组件的正确方法是什么？

Question

我遇到了以下问题。

设计概要包含 3 个不同的页面。第 2 页的 Navbar 和 Footer 布局相同，但第三页的这些组件具有不同的样式。我使用的是最新的 react-router-dom v6，与旧版本相比，它发生了很大变化。

所以我的目标是呈现没有页脚和导航栏的第 3 页，并使用新组件为其赋予自己的样式。尽管在我的 App.js 中，我为每个页面都呈现了这 2 个组件，以提高效率并避免重复代码。

App.js

import React from "react";
import { Routes, Route } from "react-router-dom";

import Navigation from "./Components/Navigation/Navigation.components";
import Footer from "./Components/Footer/Footer.components";

import HomePage from "./Pages/HomePage/Home.pages";
import Portfolio from "./Pages/PortfolioPage/Portfolio.pages";
import Contact from "./Pages/ContactPage/Contact.pages";

import './App.scss';

function App() {
  return (
    <div className="App">
      <Navigation />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="portfolio" element={<Portfolio />} /> // this page needs different components
        <Route path="contact" element={<Contact />} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

我尝试了一个解决方案来围绕需要呈现导航的路由编写一个简单的包装器，并将普通路由用于不需要通用导航的组件，如下所示:

const RouteWithNavbar = ({exact, path, component:Component, ...rest}) => {
   return <Route exact={exact} path={path} {...rest} render={(routeProps) => {
      return <><Navigation {...routeProps}/><Component {...routeProps}/>
   }}
   />
}

    function App() {
      return (
        <div className="App">
          <Navigation />
          <Routes>
            <RouteWithNavbar path="/" element={<HomePage />} />
            <Route path="portfolio" element={<Portfolio />} /> // this page needs different components
            <RouteWithNavbar path="contact" element={<Contact />} />
          </Routes>
          <Footer />
        </div>
      );
    }
    
    export default App;

但是这个解决方案行不通，因为

All component children of < Routes > must be a < Route > or <React.Fragment>

任何想法都将不胜感激，因为我正在滚动浏览 react-dom 文档，但看不到字里行间。一定有一些明显的解决方案，但我过分强调它却看不到。

Answer 1

在 react-router-dom 版本 6 中不再使用自定义路由组件。创建一个布局包装器组件，将子路由呈现到 Outlet 组件中。

例子:

import { Outlet } from 'react-router-dom';

const FullLayout = () => (
  <div /* apply any styling here, or none */ >
    <Navigation />
    <Outlet />
    <Footer />
  </div>
);

const MinimalLayout = () => (
  <div /* apply any styling here, or none */ >
    <Outlet />
  </div>
);

将你想要呈现的路由包装到每个布局中。

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/*" element={<FullLayout />}>
          <Route index element={<HomePage />} />
          <Route path="contact" element={<Contact />} />
        </Route>
        <Route path="/portfolio" element={<MinimalLayout />}>
          <Route path="/portfolio" element={<Portfolio />} />
        </Route>
      </Routes>
    </div>
  );
}