首页 文章

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

提问于
浏览 次
1

我最初使用ButtermilkJS进行路由，它的路由器接受一个外部组件支柱，你可以设置它在每条路线上渲染 .

因此，例如，在以下代码中， 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-router做类似的事情？这似乎是一个非常方便的机制 .

reactjs react-router

1 回答

  • 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

    回复于

相关问题