使用 React-Router，你能设置一个"outer"组件在每个路由上渲染吗？

Question

我最初使用ButtermilkJS进行路由，它的路由器接受一个outerComponent属性，你可以将其设置为在每个路由上渲染。

因此，例如，在下面的代码中，Base是一个带有导航栏和一些用于网站背景的 css 的组件(我在每个页面上都想要的东西，无论其他内容如何(，当用户导航到/home 或/kittens 路由时，Home 和 Kittens 组件作为子道具传递给它。

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, RoutingState, Link } from 'buttermilk';
import Home from './HomePage';
import Kittens from './KittenPage';
const routes = [
{
path: '/',
render: () => Home,
},
{
path: '/kittens',
render: () => Kittens
}];
const Base () => (
<div className="base-page">
<header>
<Menu />
</header>
{this.props.children}
</div>
);

ReactDOM.render(<Router 
routes={routes} 
outerComponent={Base} />, root);

有没有办法用反应路由器做类似的事情？这似乎是一个非常方便的机制。

Answer 1

我会尝试创建一个高阶组件，使您能够用Base包装您喜欢的任何内容

import React from 'react';
const higherOrderComponent = (WrappedComponent) => {
class Base extends React.Component {
render() {
//do your base stuff here
return <WrappedComponent />;
}
}
return Base;
};
const routes = [
{
path: '/',
render: () => higherOrderComponent(Home),
},
{
path: '/kittens',
render: () => higherOrderComponent(Kittens)
}];

以下是 HOC 的 React 文档： https://reactjs.org/docs/higher-order-components.html