React入门与进阶之路由

zjdy4615 8年前
   <h2><strong>React入门与进阶之路由</strong></h2>    <p>在传统的网页应用中,一般是根据用户的操作指向不同的url,然后服务器渲染出不同的html代码,后来有了ajax,在同一页面里,可以为不同操作,指定处理器函数,在不刷新页面的情况下更新局部视图,但是局限依然较大,一旦跳转了URL,依然需要服务器渲染模板返回;而在Backbone,Angular,React出现以后,在单页面应用中,我们可以给不同URL指定处理器函数,保持URL与视图的同步,渲染模板的功能已经转移到客户端进行,与服务器的交互只涉及到数据,这就是路由的功能。</p>    <h2><strong>React中的路由</strong></h2>    <p>React是一个用户界面类库,仅相当于MVC模式中的V-view视图,其本身并不包含路由功能,但是它以模块的方式提供了路由功能,可以很好的与React进行协作开发,当然这也并不是必须使用的。现在很多单页应用框架都实现了各自的路由模块,如Backbone,Angular等。而这其中很多路由模块也能与React搭配使用。本文将介绍本人使用过的两种:Backbone.Router和react-router。</p>    <p>不使用路由模块,我们需要处理一个展示笔记列表和展示特定笔记对应不同视图时,React处理视图更新的方式大致如此:</p>    <pre>  <code class="language-javascript">    // 状态变量      var NOTINGSTATUS = {          SHOW: 0,          EDIT: 1      };        // 模拟数据      var notings ={          10001: {              id: 10001,              title: 'React',              content: 'React Router',              status: NOTINGSTATUS.SHOW          },          10002: {              id: 10002,              title: 'Backbone',              content: 'Backbone Router',              status: NOTINGSTATUS.EDIT          }      };        // React-Noting应用入口组件      var NotingApp = React.createClass({          getInitialState: function() {              return {                };          },          render: function() {              return (                  <div>                      <h1>React Noting</h1>                      <NotingList notings={this.props.notings.slice(0, this.props.indexNotingListLength)}/>                  </div>              );          }      });        // 展示列表组件      var NotingList = React.createClass({          getNotings: function() {              return notings;          },          getInitialState: function() {              return {                  notings: this.props.notings || this.getNotings()              };          },          render: function() {              var notings = this.state.notings;              var _notingList = [];                for (var key in notings) {                  _notingList.push(<NotingItem key={key} noting={notings[key]} />);              }              return (                  <div>                      <ul>{_notingList}</ul>                  </div>              );          }      });      // 展示特定项组件      var NotingItem = React.createClass({          getInitialState: function() {              return {                  noting: this.props.noting,                  status: this.props.noting.status              };          },          editNote: function() {              this.setState({                  status: NOTINGSTATUS.EDIT;              });          },          render: function() {              var status = this.state.status;              var noting = this.state.noting;                if (status === NOTINGSTATUS.EDIT) {                  return (                      <li>                          <input type="text" value={noting.title} autoFocus={true} />                      </li>                  );              }else if (status === NOTINGSTATUS.SHOW) {                  return (                      <li>                          <h3 onClick={this.editNote}>{noting.title}</h3>                      </li>                  );              }          }      });        var indexNotingListLength = 3;      React.render(          <NotingApp notings={notings} length={indexNotingListLength} />,          document.querySelector('.noting-wrap')      );</code></pre>    <p>如上,没有路由模块管理,只是通过返回的组件状态变更,更新对应视图,随着应用越来越大处理会越发繁琐,接下来我们通过使用路由管理URL和视图的同步的方式来达到相同目的。</p>    <h2><strong>Backbone.Router</strong></h2>    <p>Backbone是一种MVC(Model-View-Controller)模式的框架,其路由模块属于Controller层,独立于其他模块,可以很好的与React搭配使用,之前的例子使用Backbone.Router实现后如下:</p>    <pre>  <code class="language-javascript">    var NOTINGSTATUS = {          SHOW: 0,          EDIT: 1      };      var NOTINGROUTERTYPE = {          LIST: 0,          ITEM: 1      };        var NotingRouter = Backbone.Router.extend({          routes; {              '/': 'index',              'notings': 'showNotings',              'notings/:id': 'showNoting'          },          render: function(type, extraData) {              if (type === NOTINGROUTERTYPE.LIST) {                  React.render(                      <NotingList notings={notings} />,                      document.querySelector('.noting-wrap')                  );              }else if (type === NOTINGROUTERTYPE.ITEM) {                  React.render(                      <NotingItem noting={notings[extraData.id]} />,                      document.querySelector('.noting-wrap');                  );              }          },          index: function() {            },          showNotings: function() {              this.render(NOTINGROUTERTYE.LIST);          },          showNoting: function(id) {              this.render(NOTINGROUTERTYPE.ITEM, {id: id});          }      });        var notingRouter = new NotingRouter();      Backbone.history.start();</code></pre>    <p>如上,如果访问一个如/notings的URL地址,将会展示所以noting,而访问诸如/notings/123这种的URL则会展示特定id为123的noting。</p>    <h2><strong>react-router</strong></h2>    <p>注:react-router 1.0.x和0.13.x两个大版本之前API语法有差别,本文使用最新的语法介绍react-router。</p>    <p>我们在前文了解了Backbone.Router如何作为路由模块与React搭配使用,现在继续学习react-router。</p>    <p>不同于Backbone的路由模块,react-router完全由React组件(component)构成:路由本身被定义成组件使用,而其内部路由分发处理器也定义成组件的形式使用。</p>    <p>现在让给我们继续使用react-router来实现之前展示noting的例子的路由管理:</p>    <pre>  <code class="language-javascript">    var Router = require('react-router').Router;      var Route = require('react-router').Route;      var Link = require('react-router').Link;          /**       * NotingApp.js       * @author [惊鸿]       * @description [应用入口js]       * @Date 2016/09/23       */        var React = require('react');      var Link = require('react-router').Link;      var NotingDate = require('./NotingDate');        var NotingApp = React.createClass({            getInitialState: function() {              return {}          },          render: function() {              var date = new Date();                return (                  <div>                      <Link to="/index"><h2>React Noting</h2></Link>                      <NotingDate date={date} />                      {this.props.children}                  </div>              );          }      });        /**       * NotingList.js       */      var React = require('react');      var NotingAction = require('../actions/NotingActions');      var NotingStore = require('../stores/NotingStore');      var NotingInput = require('./NotingInput');      var NotingItem = require('./NotingItem');      var Utils = require('../commons/utils.js');      var ReactPropTypes = React.PropTypes;        var indexNotingLength = 3;      function getNotingState(length) {          var notings = NotingStore.getAllNotings();          var _notings;            _notings = Utils.sliceObj(notings, length);            return {              notings: _notings          };      }        var NotingList = React.createClass({          indexNotingLength: indexNotingLength,          isAutoFocus: true,          placeholderTxt: '添加一条新笔记',          propTypes: {              notings: ReactPropTypes.object          },          type: null,          getInitialState: function() {              var notings = getNotingState().notings;              var _notings = this.props.notings || notings;                this.type = this.props.params.type;              if (this.type === 'all') {                  _notings = notings;              }else {                  _notings = getNotingState(this.indexNotingLength).notings;              }                return {                  notings: _notings              };          },          render: function() {              var notings = this.state.notings;              var _notingList = [];                if (Object.keys(notings).length < 1) {                  return null;              }              for (var key in notings) {                  _notingList.push(<NotingItem key={key} noting={notings[key]} />);              }              return (                  <div className="notings-wrap">                      <NotingInput autoFocus={this.isAutoFocus} placeholder={this.placeholderTxt} onSave={this._onSave} />                      <ul className="noting-list">{_notingList}</ul>                  </div>              );          }      });        /**       * NotingItem.js       */      var React = require('react');      var Link = require('react-router').Link;      var ReactPropTypes = React.PropTypes;      var NotingStore = require('../stores/NotingStore');      var Utils = require('../commons/utils');        function getNotingState(id) {          var notings = NotingStore.getAllNotings();          return notings[id];      }        var NotingItem = React.createClass({          propTypes: {              noting: ReactPropTypes.object          },          getInitialState: function() {              return {                  noting: this.props.noting || getNotingState(this.props.params.id)              };          },          render: function() {              var _noting = this.state.noting;              var _btn;                if (!Utils.isPlainObject(_noting)) {                  return null;              }                if (this.props.params && this.props.params.id) {                  _btn = <Link to="/notings/all">Show More</Link>;              }else {                  _btn = <Link to={{pathname:'/noting/' + _noting.id}}>Read More</Link>;              }                return (                  <li className="notings-item" key={_noting.id}>                      <h3 className="noting-title">{_noting.title}</h3>                      <div className="noting-content">{_noting.content}</div>                      {_btn}                  </li>              );          }      });</code></pre>    <p>如上为React Component主要代码,路由模块代码如下:</p>    <pre>  <code class="language-javascript">    /**       * NotingRouter.js       * @description [React-Noting应用路由模块]       * @author [惊鸿]       * @Date 2016/10/07       */        var React = require('react');      var ReactRouter = require('react-router');      var Router = ReactRouter.Router;      var Route = ReactRouter.Route;      var IndexRoute = ReactRouter.IndexRoute;      var Link = ReactRouter.Link;      var browserHistory = ReactRouter.browserHistory;      var NotingApp = require('../components/NotingApp.js');      var NotingList = require('../components/NotingList.js');      var NotingItem = require('../components/NotingItem.js');        var NotingRouter = (          <Router history={browserHistory}>              <Route path="/" component={NotingApp}>                  <IndexRoute component={NotingList} />                  <Route path="notings/:type" component={NotingList} />                  <Route path="noting/:id" component={NotingItem} />              </Route>              <Route path="/index" component={NotingApp}>                  <IndexRoute component={NotingList} />              </Route>          </Router>      );        React.render(          NotingRouter,          document.querySelector('.noting-wrap')      );</code></pre>    <p>如上路由,用户访问跟路由/或/index时(比如http://localhost:3000/或http://localhost:3000/index),页面加载NotingApp组件,访问诸如/notings/all时将在NotingApp下加载NotingList组件,访问/noting/123路径时,则将在NotingApp下加载NotingItem组件。</p>    <h3><strong>获取URL参数</strong></h3>    <p>React路由支持我们通过 query 字符串来访问URL参数。比如访问 noting/1234?name=jh,你可以通过访问 this.props.location.query.来访问URL参数对象,通过this.props.location.query.name从Route组件中获得”jh”值。</p>    <h3><strong>路由配置</strong></h3>    <p>路由配置是一系列嵌套指令,它定义路由如何匹配URL和匹配URL后的操作(具体而言,即组件切换或更新)。</p>    <p><strong>Router</strong></p>    <p>React所有路由实例必须包含在< Router>标签内,以组件形式定义,该组件有history属性,其值有三种,将在后文介绍。</p>    <p><strong>Route</strong></p>    <p>定义具体路由节点使用Route指令,该指令有许多属性:</p>    <ul>     <li> <p>path</p> <p>声明该路由节点所匹配URL(绝对路径)或URL片段(相对路径)字符串值,若该属性未赋值,则表示此路由节点不需匹配URL,直接嵌套渲染组件。</p> </li>     <li> <p>component</p> <p>特定URL匹配到该节点时,渲染此路由节点定义的组件,如此,层层嵌套下去。</p> </li>    </ul>    <p>**this.props.children–Render,对应当前路由的默认子路由,将渲染返回默认子路由的组件。 **</p>    <p><strong>IndexRoute</strong></p>    <p>默认情况下,this.props.children值是undefined,即默认子路由不存在,我们可以通过IndexRoute指令指定路由的默认子路由,匹配且仅匹配到当前路由的URL将层层渲染路由组件到此默认子路由组件。</p>    <p><strong>Redirect</strong></p>    <p>顾名思义,这是一个重定向指令,很多时候我们可能改变了某些URL,之前的和改变后的URL都需要匹配该路由,这时,就需要使用Redirect指令:</p>    <pre>  <code class="language-javascript">    React.render((        <Router>          <Route path="/" component={App}>            <IndexRoute component={Dashboard} />            <Route path="about" component={About} />            <Route path="inbox" component={Inbox}>              {/* Redirect /inbox/messages/:id to /messages/:id */}              <Redirect from="messages/:id" to="/messages/:id" />            </Route>              <Route component={Inbox}>              <Route path="messages/:id" component={Message} />            </Route>          </Route>        </Router>      ), document.body);</code></pre>    <p><strong>onEnter 和onLeave钩子</strong></p>    <p>React路由也可以定义onEnter和onLeave钩子函数(Hooks),在路由变更发生时触发,分别表示在离开某路由,进入某路由触发定义的钩子回调函数。</p>    <ul>     <li> <p>onLeave</p> <p>路由变更时,首先触发onLeave钩子回调函数,且在离开的所有定义过的路由都会由外到内触发。</p> </li>     <li> <p>onEnter</p> <p>路由变更时,接着onLeave钩子回调函数执行后,会从外到内层层触发onEnter回调函数。</p> </li>    </ul>    <p><strong>JSX和Plain Object</strong></p>    <p>React提供JSX语法开发React应用,也支持原生JavaScript语法,路由模块也是,对于路由,可以使用Object对象的形式定义:</p>    <p>var routes = {</p>    <p>};</p>    <p>render( , document.body);</p>    <p>原生语法不支持Redirect指令,我们只能使用onEnter钩子,在回调函数里面处理重定向。</p>    <h3><strong>路由匹配(Route Matching)</strong></h3>    <p>如果想要明白路由如何匹配某特定URL,就必须学习路由的三个相关概念和属性:</p>    <ul>     <li> <p>嵌套关系(nesting)</p> </li>     <li> <p>路径语法(path)</p> </li>     <li> <p>优先级(precedence)</p> </li>    </ul>    <p><strong>嵌套关系(nesting)</strong></p>    <p>React路由嵌套路由的概念,就像DOM树一样;应用路由以嵌套的形式定义,路由对应的视图组件也形成嵌套,</p>    <p>当访问的特定URL层层向下匹配成功时,最后的匹配路由节点及其所有嵌套父级路由对应的组件都将被渲染。</p>    <p>React Router traverses the route config depth-first searching for a route that matches the URL.</p>    <p>React路由会对路由配置进行深度优先搜索,以找到匹配特定URL的路由。</p>    <p><strong>路径语法(path syntax)</strong></p>    <p>路由的path属性值是字符串类型,能匹配特定URL或该URL的部分,除了可能包含的以下特殊符号,该值都是按照字面量进行解释的:</p>    <ul>     <li> <p>:paramName 路由参数,匹配特定URL中/,?或#字符后面的部分</p> </li>     <li> <p>() 表示URL中该部分是可选的</p> </li>     <li> <p>匹配任意数量任意字符,直到下一个匹配点</p> </li>     <li> <p>** 匹配任意字符,直到遇见/,?或#字符,并且会产生一个splat参数</p> </li>    </ul>    <pre>  <code class="language-javascript">    <Route path="/notings/:id">        // matches /notings/23 and /notings/12345      <Route path="/notings(/:id)">      // matches /notings, /notings/23, and /notings/12345      <Route path="/blog/*.*">           // matches /blog/a.jpg and /blog/a.html      <Route path="/**/*.html">          // matches /blog/a.html and /blogs/demo/b.html</code></pre>    <p><strong>路由的相对路径与绝对路径</strong></p>    <ul>     <li> <p>绝对路径,即以/开头的路径字符串,是一个独立的路径</p> </li>     <li> <p>相对路径,不以/开头,相对于其父级路由路径值</p> </li>    </ul>    <p>If a route uses a relative path, it builds upon the accumulated path of its ancestors.</p>    <p>Nested routes may opt-out of this behavior by using an absolute path.</p>    <p>如果一个路由使用的是相对路径,则该路由匹配的URL是由该路由路劲及其所有祖先路由节点路径值从外到内拼接组成;</p>    <p>若使用的是绝对路径,则该路由就忽略嵌套关系直接匹配URL。</p>    <p><strong>优先级(precedence)</strong></p>    <p>路由算法按照路由定义的顺序,从上到下匹配URL,所以,在有两个或多个同级路由节点时,必须保证前面的路由不能与后面的路由匹配同一个URL。</p>    <h3><strong>History</strong></h3>    <p>History可以监听浏览器地址栏的变化并且能把URL解析成一个location对象,React路由基于History,</p>    <p>将URL解析成location对象,然后使用该对象来匹配路由并且正确的嵌套渲染组件。</p>    <p>React提供了三种最常用的history,当然react router也支持我们实现自定义history:</p>    <ul>     <li> <p>browserHistory</p> </li>     <li> <p>hashHistory</p> </li>     <li> <p>createMemoryHistory</p> </li>    </ul>    <p>我们可以直接从react router包中直接导入这些history:</p>    <pre>  <code class="language-javascript">    // CommonJs require方式      var browserHistory = require('react-router').browserHistory;      var hashHistory = require('react-router').hashHistory;        // ES6 module import      import { browserHistory } from 'react-router';      import { hashHistory } from 'react-router';        React.render(        <Router history={browserHistory} routes={routes} />,        document.getElementById('app')      );</code></pre>    <p>他们都是有对应的create方法产生创建的,更多查看https://github.com/mjackson/history/:</p>    <ul>     <li>createBrowserHistory is for use in modern web browsers that support the HTML5 history API (see cross-browser compatibility)</li>     <li>createMemoryHistory is used as a reference implementation and may also be used in non-DOM environments, like React Native</li>     <li>createHashHistory is for use in legacy web browsers</li>    </ul>    <pre>  <code class="language-javascript">    // JavaScript 模块导入(译者注:ES6 形式)      import createBrowserHistory from 'history/lib/createBrowserHistory';      // 或者以 commonjs 的形式导入      const createBrowserHistory = require('history/lib/createBrowserHistory';</code></pre>    <p><strong>browserHistory</strong></p>    <p>browserHistory适合利用React路由开发的浏览器应用使用。在浏览器中,通过History API创建以管理真实URL,比如创建一个新的URL:example.com/some/path。</p>    <p>使用该类型history前,我们必须对服务器进行配置,对所有URL,我们都返回同一html文件,如:index.html。</p>    <ul>     <li> <p>若使用node服务,则需要添加以下设置:</p> <pre>  <code class="language-javascript">    // handle every other route with index.html, which will contain      // a script tag to your application's JavaScript file(s).      app.get('*', function (request, response){        response.sendFile(path.resolve(__dirname, 'public', 'index.html'))      });</code></pre> </li>     <li> <p>对于nginx服务器,需添加如下配置:</p> <pre>  <code class="language-javascript">    server {            //...            location / {                  try_files $uri /index.html;            }      }</code></pre> </li>     <li> <p>对于Apache服务器,首先在项目根目录下创建一个.htaccess文件,添加如下代码:</p> <pre>  <code class="language-javascript">    RewriteBase /      RewriteRule ^index\.html$ - [L]      RewriteCond %{REQUEST_FILENAME} !-f      RewriteCond %{REQUEST_FILENAME} !-d      RewriteRule . /index.html [L]</code></pre> </li>    </ul>    <p><strong>兼容性与IE8+</strong></p>    <p>通过使用特性检测检测是否支持浏览器本地window.history相关API,</p>    <p>如果不支持,如IE8/9,为了更方便的开发,及更好的用户体验,在每次URL变更通过刷新页面来兼容旧浏览器。</p>    <p><strong>注:index.html引入js文件必须是绝对路径,否则找不到该文件</strong></p>    <p><strong>hashHistory</strong></p>    <p>hashHistory使用URL的hash(#)片段,创建诸如example.com/#/some/path的路径。</p>    <p><strong>hashHistory与browserHistory</strong></p>    <p>使用hashHistory不需要配置服务器,并且兼容IE8+,但是依然不推荐使用,</p>    <p>因为每一个web应用,都应该有清晰的URL地址变化,并且需要支持服务器端渲染,这些对于hashHistory来说是不可能实现的。</p>    <p>但是,如果在不支持window.historyAPI的老旧浏览器中,我们也不希望每次操作变更都刷新页面,这时候是需要hashHistory的。</p>    <p><strong>createMemoryHistory</strong></p>    <p>memoryHistory不操作或读取浏览器地址栏URL,它存在于内存中,我们使用它实现服务器渲染,适用于测试或渲染环境,如React Native。</p>    <p>不同于前两种history,React已经为我们创建好了,memoryHistory,必须在应用中主动创建:</p>    <pre>  <code class="language-javascript">    var createMemoryHistory = require('react-router').createMemoryHistory;      var history = createMemoryHistory(location);</code></pre>    <p><strong>实例</strong></p>    <pre>  <code class="language-javascript">    var React = require('react');      var render = require('react-dom');      var browserHistory = require('react-router').browserHistory;      var Router = require('react-router').Router;      var Route = require('react-router').Route;      var IndexRoute = require('react-router').IndexRoute;      var App = require( '../components/App');      var Home = require('../components/Home');      var About = require('../components/About');      var Features = require('../components/Features');        React.render(        <Router history={browserHistory}>          <Route path='/' component={App}>            <IndexRoute component={Home} />            <Route path='about' component={About} />            <Route path='features' component={Features} />          </Route>        </Router>,        document.getElementById('app')      );</code></pre>    <h3><strong>默认路由及相关默认指令(IndexRoute,IndexRedirect和IndexLink)</strong></h3>    <p><strong>Index Route</strong></p>    <p>前文已经介绍< IndexRoute>指令,该指令声明当前路由的默认子路由及其对应需默认渲染的组件,更多请查看上文。</p>    <p><strong>Index Redirects</strong></p>    <p>有时候,我们在访问URL的时候,希望将当前路由默认重定向到另一路由,与前文的Redirect指令不同,Redirect指令是将匹配from属性值对应的路由的URL重定向到匹配to属性值对应的路由的URL;而IndexRedirect,是将当前路由的默认子路由重定向为其他子路由,重定向对象是当前路由的子路由。</p>    <p><strong>Index Links</strong></p>    <ul>     <li> <p>Link</p> <p>React直接提供Link链接组件,to属性声明链接到的地址:</p> <pre>  <code class="language-javascript">    var Link = require('react-router').Link;        var app = React.createClass({          render: function() {              return(                  <Link to="/notings">noting列表</Link>              );          }      });        React.render(<app />, document.body);</code></pre> </li>    </ul>    <p>如上,点击noting列表将导航到项目noting列表展示页,即/notings路由下。</p>    <ul>     <li> <p>IndexLink</p> <p>不同于Link指令,Link指令是提供一个链接,而React路由的Link是有激活状态的,如它的activeStyle属性,可以声明当前页面链接激活时的样式,假如有一个Link链接</p> <p>noting列表,当/notings路由或其子路由(如/notings/123)被渲染时,都会使该链接处于激活状态;而如果使用 noting列表,则需要/notings路由被渲染后才激活该链接。</p> </li>    </ul>    <p> </p>    <p> </p>    <p>来自:http://blog.codingplayboy.com/2016/10/24/react_router/</p>    <p> </p>