自定义布局未被识别为 <Route> 组件答案

【问题标题】：Custom layout is not recognised as a <Route> component自定义布局未被识别为 <Route> 组件
【发布时间】：2022-01-06 18:22:37
【问题描述】：

我正在尝试在我的 React 项目中使用自定义路由，但我不断收到警告：

Error: [NoNavbarLayoutRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

这是我的两种不同的布局：

const NoNavbarLayoutRoute = ({ component: Component, ...rest }) => {
    return (
        <Route {...rest} render={matchProps => (
                <NoNavbarLayout>
                    <Component {...matchProps} />
                </NoNavbarLayout>
            )}
        />
    );
};

const NavbarLayoutRoute = ({ component: Component, ...rest }) => {
    return (
        <Route {...rest} render={matchProps => (
            <NavbarLayout>
                <Component {...matchProps} />
            </NavbarLayout>
        )}
        />
    );
};

这是其中一种布局的示例：

import React from "react";

const NoNavbarLayout = ({ children }) => (
    <div className="login-layout">
        <p>No navbar</p>
        {children}
    </div>
);

export default NoNavbarLayout;

这是我使用它们的地方：

class App extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Routes>
                        <NoNavbarLayoutRoute path="/bossHome" element={<BossHomePage />} />
                        <NavbarLayoutRoute path="/home" element={<Home />} />
                    </Routes>
                </BrowserRouter>
            </div>
        );
    }
}

据我了解，这些布局应该是 Route 组件，但一定是我做错了什么。任何帮助将不胜感激！

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

在react-router-dom v6 中不再有自定义路由组件的用例/允许。只有Route（或Fragment）组件可以是Routes 组件的子组件。布局组件在 Route 组件的 element 属性上呈现，它们可以呈现子组件或 Outlets（如果它们包装嵌套的 Route 组件）。

给定一个布局组件渲染一个children prop *:

const NoNavbarLayout = ({ children }) => (
  <div className="login-layout">
    <p>No navbar</p>
    {children}
  </div>
);

* 我假设NavbarLayout 组件是相似的

路线如下所示：

<Routes>
  <Route
    path="/bossHome"
    element={(
      <NoNavbarLayout>
        <BossHomePage />
      </NoNavbarLayout>
    )}
  />
  <Route
    path="/home"
    element={(
      <NavbarLayout>
        <Home />
      </NavbarLayout>
    )}
  />
</Routes>

【讨论】：