weixin_37242696的博客

前言：对package.json的认识首先我们应该对package.json有一个认识：它包含了整个项目所依赖的模块以及项目的配置信息。下面我们说一下package.json中重要的几个属性：1、scripts:  通常它指定了npm命令行的缩写，比如start指定了运行npm run start时，要执行的命令。下面的设置分别指定了start、build、test、eject要执行的命令。2、d...

前言：这个例子的难点在于他涉及到多个页面之间的公共数据（即全局变量），实际项目中会用redux管理全局变量，但是考虑到例子的理解难度，我这里采用了本地存储localStorage来管理数据。这样这个例子就好理解了很多。实现效果：实现思路：这个项目里有一个变量是isLogin，判断用户是否登录，只有登录的用户才可以访问Protected Page，该变量是该程序的核心。我们先来看一下App.js:i...

转载自：react-router和react-router-dom的区别react-router-v4，我称之为“第四代react-router”，react-router和react-router-dom的区别是什么呢？为什么有时候我们看到如下的写法：写法1:import {Swtich, Route, Router, HashHistory, Link} from 'react-router-...

前言：1、{...props}、{...route}用到了扩展运算符，具体可点此了解，扩展运算符2、核心组件是RouterWithSubRoutes。const RouterWithSubRoutes = (route) => ( <Route path={route.path} render={props => ( <route.component {...p...

前言：这是一个很简单的例子，类似与之前讲的URL路径匹配。倘若你对路由没有任何了解，我感觉这个例子很适合学习路由。实现效果：代码如下：const About = () => <h2>About</h2>const Company = () => <h2>Company</h2>const User = ({match}) => ...

前言：1、react定义组件有两种方式：1)、用class即定义类的形式，这种形式我们前面用到好多次了。class WillMatch extends Component{ render(){ return( <h1> Matched </h1> ) }}2)、函数定义组件，这种方式是一中简便的定义组件的方...

前言：该例子涉及到的知识点并没有新增（看过之前的例子的前提），只是它逻辑理解起来可能会费点劲。我们先看效果图及代码然后在对它进行分析。实现效果：代码如下：const persons = [ { id: 0, name: 'Michelle', friends: [1, 2, 3] }, { id: 1, name: 'Sean', friends: [0, 3] }, { id: 2, na...

这个例子比较简单，可以加深我们对路由三大组件BrowserRouter、Route、Link认识。项目中我们肯定会涉及到传入参数不同但调入相同的页面。例如新闻列表与新闻详情页、产品列表与产品详情的关系，这些都需要我们传入参数，同时在子页面获取参数。该例子很好的解决了这一问题。实现效果多个Link都对应这child这个组件，路径匹配通过path='/:id'来实现。class App extends...

针对react路由的讲解我这边会给出十个例子，这十个例子参考与react-router-dom官网。官网中的例子为了讲解方便会将一个例子中涉及的代码放在一个js文件中，没有按照企业项目规范放置代码，我这里会将代码按常规的写法重构，方便理解。前言：1、倘若读者对react-router-dom还是一个小白，我建议读者在遇到一些基础问题（例如：该组件什么意思、作用是什么，属性什么意思诸如此类）时可以点...

前言：倘若一个页面不存在，它就会跳到404页面，针对react即：1、用一个没有path属性的Route（即404页面）去匹配任何路径；2、Switch返回第一匹配成功的Route，只渲染第一个与当前访问地址匹配的<Route>或<Redirect>；实现效果：涉及代码：class App extends Component{ render() { return...

前言：这个例子主要讲的是Prompt组件的用法。该组件主要用于用户离开当前页面时给出提示。属性有：message：当用户离开当前页时设置的提示信息；其可以时一个字符串也可以是一个函数；如下：<Prompt message="确定要离开？" /><Prompt message={location => ( ` 确定要离开${location.pathname}`)} /...

讲的非常好的一篇文章，真心值得看！转载：初探 React Router 4.0

前言：这个例子主要用到Route组件的三大render methods（render、component、children）之一children；有小编说children不同于component的作用是：有时候你可能只想知道访问地址是否被匹配，然后改变下别的东西，而不仅仅是对应的页面。我还不是很能体会到这句话的意思，不过这些不重要，你把它当成component或render完全可以理解。效果如下：...