时间戳

首页 > 解决方案 > 使用 React-Router，你可以设置一个“外部”组件在每条路由上渲染吗？

reactjs - 使用 React-Router，你可以设置一个“外部”组件在每条路由上渲染吗？

问题描述

我最初使用ButtermilkJS进行路由，它的 Router 接受一个 outerComponent 道具，您可以将其设置为在每个路由处渲染。

因此，例如，在下面的代码中，Base是一个带有导航栏和一些用于网站背景的 css 的组件（我希望在每个页面上都有的东西，无论其他内容如何），并且 Home 和 Kittens 组件被传递给它用户导航到 /home 或 /kittens 路线时的 children 道具。

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-router 做类似的事情？这似乎是一个非常方便的机制。

标签： reactjsreact-router

解决方案

我会尝试创建一个高阶组件，它可以让你包装任何你喜欢的东西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

推荐阅读