本文翻译自：Reusing layouts in React Router v4

在 React Router V4 运用中，愿望在每一个路由上显现一些默许的组件，比方页眉和页脚：

<div className="App">
  <div className="Header">
    Page Header
  </div>
  <div className="Content">
    {content that changes}
  </div>
  <div className="Footer">
    Page Footer
  </div>
</div>

在最新版本的 React Router V4 中能够很轻易完成这一点，经由过程为特定的用例建立子规划。

建立默许规划

我们把每一个页面都运用的规划作为默许规划。当页面路由和地址栏婚配的时刻，React router 会挪用 render 属性的函数：

// 挪用组件的通例体式格局
<Route path="/" component={SomeComponent} />

// 运用 render 属性能够最组件做一些自定义操纵
<Route path="/" render={matchProps => <SomeComponent {...matchProps} />} />

这是异常有效的，由于我们能够把这些组件放到 <Route /> 中，然后掌握哪些组件应该被衬着，同时把 Route 的属性传递给子组件：

const DefaultLayout = ({component: Component, ...rest}) => {
  return (
    <Route {...rest} render={matchProps => (
      <div className="DefaultLayout">
        <div className="Header">Header</div>
          <Component {...matchProps} />
        <div className="Footer">Footer</div>
      </div>
    )} />
  )
};

<DefaultLayout path="/" component={SomeComponent} />

rest 参数包括了须要传递给 DefaultLayout 的除了 component 之外的一切属性，所以我们能够把这些属性从 Route 转发到底层组件。

经由过程向 Route 组件供应 render 属性，我们能够掌握 component 属性的衬着。在这类情况下，我们将其包括在包括页眉和页脚的 HTML 中，但这能够只是把其他组件做了简朴的分组。matchProps 是 Route 衬着时的另一个属性。

一个异常重要的注重点是把 component 组件从新命名为 Component，由于它会影响 JSX 怎样转换我们的代码：

<component />
// 转换为
React.createElement("component", null); // 不是我们须要的

<Component />
// 转换为
React.createElement(Component, null); // 如今，这是一个 React 组件

浏览 facebook 官方文档 “用户自定义组件必需是大写字母开首” 猎取更多信息。

扩大默许规划

我们的默许规划已包括了在每一个页面上的须要同享的组件，能够有时刻我们还要为某个视图增加某些特定组件，比方博客的帖子。处理这个题目的一个要领是建立 DefaultLayout 然后只为那些新页面增加特定组件：

const PostLayout = ({component: Component, ...rest}) => {
  return (
    <DefaultLayout {...rest} component={matchProps => (
      <div className="Post">
        <div className="Post-content">
          <Component {...matchProps} />
        </div>
        <div className="Post-aside">
          <SomeSideBar />
        </div>
      </div>
    )} />
  );
};

<PostLayout path="/posts/:post" component={PostComponent} />

唯一的区别是将函数传递给 component 属性而不是 render 属性。您能够根据须要自在扩大规划。

仅此而已

短小精悍。

React Router 的新版本专注于运用 React 组件模子，而这些组件能够异常简朴的组合在一起。

检察这个 GitHub issue，能够看看关于运用差别的默许规划的议论。

React Router V4 文档中文翻译 正在进行中。。。