使用 React Router 6v 渲染具有不同样式的 React 组件（例如导航栏）的正确方法是什么？

Question

我遇到以下问题。

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

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

应用程序.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;

但这个解决方案不起作用，因为

<Routes>的所有组件子级都必须是<Route>或<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>
  );
}