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

Question

我正试图在我的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组件，但肯定是我做错了什么。如有任何帮助，我们将不胜感激！

Answer 1

在react-router-domv6中，不再有自定义路由组件的用例/余量。只有Route(或Fragment(组件可以是Routes组件的子级。布局组件在Route组件的element道具上渲染，如果它们包装嵌套的Route组件，则它们可以渲染子组件或Outlets。

给定呈现children道具的布局组件*：

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>