[譯]基於 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 文檔中文翻譯 正在進行中。。。