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

用户83 发布于2019-08-20 15:37 / 607人阅读

摘要：通过向组件提供属性，我们可以控制属性的渲染。在这种情况下，我们将其包含在包含页眉和页脚的中，但这可能只是把其他组件做了简单的分组。仅此而已短小精悍。的新版本专注于使用组件模型，而这些组件可以非常简单的组合在一起。

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

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


  
    Page Header
  
  
    {content that changes}
  
  
    Page Footer

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

创建默认布局

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

// 调用组件的常规方式


// 使用 render 属性可以最组件做一些自定义操作
 } />

这是非常有用的，因为我们可以把这些组件放到中，然后控制哪些组件应该被渲染，同时把 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 组件模型，而这些组件可以非常简单的组合在一起。

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

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

服务器托管专线服务 react-router4 react router cdn react-router react-router-redux

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82379.html

从无到有-在create-react-app基础上接入react-router、redux-saga

摘要：将所有的需要鉴权的页面放在例如下，只有在有微信相关鉴权的信息存在，才允许访问接下来的界面，否则，容器内甚至可以直接不渲染接下来的界面。而接下来的则是把路由导向至了一个微信端专用的。搭建项目框架新建项目执行如下代码，用create-react-app来建立项目的基础框架，然后安装需要用到的依赖。 $ npx create-react-app my-test-project $ cd...

褰辩话 2019-08-23 14:06 评论0 收藏0
React结合TypeScript和Mobx初体验

摘要：结合编辑器可以推导变量对应的类型以及内部的结构，提高代码的健壮性和可维护性。通过充分利用时间回溯的特征，可以增强业务的可预测性与错误定位能力。对于对象的哪部分需要成为可观察的，提供了细粒度的控制。 showImg(https://segmentfault.com/img/bVba6Ts?w=1218&h=525); 为什么要使用TypeScript 侦测错误通过静态类型检测可以尽早检...

dreambei 2019-08-22 17:29 评论0 收藏0
React Server Render

摘要：当我们在浏览器端进行切换切换的时候，页面是不刷新的，通过请求获取到数据，重新渲染结构。如果想在实际开发中使用，有几个问题不得不面对对开发者的要求高，至少要熟悉，，特别是组件的构建，如何提高复用率这些都是要在前期思考的。概述一直想用React做些东西，苦于没有实际项目练手，所以一直都是自己在搞些小玩意儿，做过用React Router构建的内部订餐系统，是个SPA，也在社区分享过。由...

boredream 2019-08-21 10:40 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0