Reactjs 使用React路由器，您可以设置一个；“外部”；要在每条路径上渲染的组件？

我最初使用的是路由，它的路由器接受一个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);

从“React”导入React；
从“react dom”导入react dom；
从“奶油牛奶”导入{路由器、路由状态、链接}；
从“./主页”导入主页；
从“/KittenPage”导入小猫；
常数路由=[
{
路径：“/”，
渲染：（）=>主页，
},
{
路径：'/kittens'，
渲染：（）=>小猫
}];
常量基（）=>(
{this.props.children}
);
ReactDOM.render（，root）；

---

有没有一种方法可以用react路由器做类似的事情？这似乎是一个非常方便的机制。

我会尝试创建一个更高阶的组件，使您能够使用

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)
      }];

从“React”导入React；
常量高级命令组件=（WrappedComponent）=>{
类基扩展了React.Component{
render（）{
//在这里做你的基本工作
返回；
}
}
返回基地；
};
常数路由=[
{
路径：“/”，
渲染：（）=>higherOrderComponent（主），
},
{
路径：'/kittens'，
渲染：（）=>higherOrderComponent（小猫）
}];

以下是HOCs的React文档：
您正在示例中导入和定义
Base
。我只是简单地举一个例子，试着给大家一个我所说的东西的草图。