[译]基于 React Router 4 的可复用 Layout 组件

本文翻译自：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 文档中文翻译 正在进行中。。。