本文翻译自：

在 应用中，希望在每个路由上呈现一些默认的组件，比如页眉和页脚：

    
  
     
          Page Header  
     
  
     
          {content that changes}  
     
  
     
          Page Footer  
     
    

在最新版本的 React Router V4 中可以很容易实现这一点，通过为特定的用例创建子布局。

创建默认布局

我们把每个页面都使用的布局作为默认布局。当页面路由和地址栏匹配的时候，React router 会调用 render 属性的函数：

// 调用组件的常规方式
    // 使用 render 属性可以最组件做一些自定义操作
     
     } />
    

这是非常有用的，因为我们可以把这些组件放到 <Route /> 中，然后控制哪些组件应该被渲染，同时把 Route 的属性传递给子组件：

const DefaultLayout = ({component: Component, ...rest}) => {  return (    
    
      (      
     
        
      
       Header
      
          
              
      
       Footer
      
      
     
    )} />  )};
    

rest 参数包含了需要传递给 DefaultLayout 的除了 component 以外的所有属性，所以我们可以把这些属性从 Route 转发到底层组件。

通过向 Route 组件提供 render 属性，我们可以控制 component 属性的渲染。在这种情况下，我们将其包含在包含页眉和页脚的 HTML 中，但这可能只是把其他组件做了简单的分组。matchProps 是 Route 渲染时的另一个属性。

一个非常重要的注意点是把 component 组件重新命名为 Component，因为它会影响 JSX 如何转换我们的代码：

    // 转换为React.createElement("component", null); // 不是我们需要的
    // 转换为React.createElement(Component, null); // 现在，这是一个 React 组件

阅读 facebook 官方文档 获取更多信息。

扩展默认布局

我们的默认布局已经包含了在每个页面上的需要共享的组件，可能有时候我们还要为某个视图添加某些特定组件，例如博客的帖子。解决这个问题的一个方法是创建 DefaultLayout 然后只为那些新页面添加特定组件：

const PostLayout = ({component: Component, ...rest}) => {  return (    
    
      (      
     
        
      
          
               
      
        
      
          
               
      
      
     
    )} />  );};
    

唯一的区别是将函数传递给 component 属性而不是 render 属性。您可以根据需要自由扩展布局。

仅此而已

短小精悍。

React Router 的新版本专注于使用 React 组件模型，而这些组件可以非常简单的组合在一起。

查看这个 ，可以看看对于使用不同的默认布局的讨论。

正在进行中。。。