你的位置:首页 > 软件开发 > Java > 细说React(二)

细说React(二)

发布时间:2016-02-29 22:00:20
上篇文章主要介绍了React的基本用法,这次将介绍一个React路由组件—react-router。在 web 应用开发中,路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时,路由系统会做出一些响应,用来保证用户界面与 URL 的同步。随着单页应用 ...

细说React(二)

上篇文章主要介绍了React的基本用法,这次将介绍一个React路由组件—react-router。

web 应用开发中,路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时,路由系统会做出一些响应,用来保证用户界面与 URL 的同步。随着单页应用时代的到来,为之服务的前端路由系统也相继出现了。有一些独立的第三方路由系统,比如 director,代码库也比较轻量。当然,主流的前端框架也都有自己的路由,比如 Backbone、Ember、Angular、React 等等。那 react-router 相对于其他路由系统又针对 React 做了哪些优化呢?它是如何利用了 React 的 UI 状态机特性呢?又是如何将 JSX 这种声明式的特性用在路由中?

一个简单的示例

现在,我们通过一个简易的博客系统示例来解释刚刚遇到的疑问,它包含了查看文章归档、文章详细、登录、退出以及权限校验几个功能,该系统的完整代码托管在 JS Bin(注意,文中示例代码使用了与之对应的 ES6 语法),你可以点击链接查看。此外,该实例全部基于最新的 react-router 1.0 进行编写。下面看一下 react-router 的应用实例:

import React from 'react';import { render, findDOMNode } from 'react-dom';import { Router, Route, Link, IndexRoute, Redirect } from 'react-router';import { createHistory, createHashHistory, useBasename } from 'history';// 此处用于添加根路径const history = useBasename(createHashHistory)({ queryKey: '_key', basename: '/blog-app',});React.render(( <Router history={history}>  <Route path="/" component={BlogApp}>   <IndexRoute component={SignIn}/>   <Route path="signIn" component={SignIn}/>   <Route path="signOut" component={SignOut}/>   <Redirect from="/archives" to="/archives/posts"/>   <Route onEnter={requireAuth} path="archives" component={Archives}>    <Route path="posts" components={{     original: Original,     reproduce: Reproduce,    }}/>   </Route>   <Route path="article/:id" component={Article}/>   <Route path="about" component={About}/>  </Route> </Router>), document.getElementById('example'));

原标题:细说React(二)

关键词:react

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录