react-router2.0 web 使用

一、前端script 引用react-router 的使用。

前言：

router有两个版本，最新的是2.0，和旧的版本。

所以有有两种写法。

汗了吧

先说2.0下的用法

首先说环境：

需要引用react react-dom reactrouter 2.0 babel/browser.js 

react 以前需要引用jsx来解析。

现在用babel来解析，所以script type="text/babel" 了。

var Router=ReactRouter.Router;
var Route=ReactRouter.Route;
var Link=ReactRouter.Link;
var browserHistory=ReactRouter.BrowserHistoryl;
var IndexRoute=ReactRouter.IndexRoute;
var Redirect=ReactRouter.Redirect;

ReactDOM.render((
 <Router history={browserHistory} >
   <Route path="/" component={App}  onEnter={requireAuthApp} onLeave={requireLeaveApp}>
    <IndexRoute  component={Home} fnclick={App.onClick} />
   <Route path="list" component={List} onLeave={requireLeaveList} >
  </Route>
  <Route path="list/:id" component={ListShow} >
  </Route>


<Route path="about" component={About} onEnter={requireAuth} >
  </Route>
  <Route path="login" component={Login} />
  <Redirect from="lists" to="list"/>
  <Route path="*" component={NoMatch}/>
  </Route>
 
 </Router>
), document.querySelector('#app'))

//path *表示当前路由内没有匹配到组件时显示
//app 组件内需要输出{this.props.children} 子组件这样才能做到局部匹配.
//当组件有子组件时都需要输出子组件。
//以下app上才输出了，所以app内不能实现三级嵌套组件。因为第二级没有输出子组件


//IndexRoute 表示此路由下默认显示的组件
//Redirect 跳转配置 from 从这个匹配跳到to 指定的匹配
//Route上的onEnter属性用于访问前的验证，如判断登录
//path 中/开头表示绝对路径，不会因放在组件内而影响
//绝对路径可能在动态路由中无法使用。


//onEnter:当跳转到组件时调用，可以用来权限验证等。
//onLeave：会在离开组件时触发，从触发组件一直触发到顶级组件的onLeave 。

如app组件内有嵌套子组件，app 渲染里需要用{this.props.children}

来显示子组件

组件接收值：

//通过this.props.params.XX
//通过this.props.location.query.XX

Link使用：

<Link to="/list/1" query={{age:23}}>listshow1</Link><br/>

Route:

path="" 定义匹配规则， /表示绝对路径

component设置组件

IndexRoute 定义默认显示组件

Redirect 跳转组件

path 定义跳转规则  component 跳转到的组件

Route path="*" 设置not find 时显示组件

onEnter onLeave 使用<br/>
在path=/ 上的onEnter在刷新或进入页面时会执行 onLeave 一直不会执行<br/>
onEnter:会在进行组件时执行(从父级到子级时经过的所有子级都从上到下执行，从子级回到父级，父级不会执行。)<br/>
同级间跳转目标onEnter会执行。<br/>
onLeave:在离开组件时执行：同级a跳转到b a上会执行离开 <br/>
父级a到子级b，父级onleave不会执行，因为没有离开父级组件，只是进入了子级。<br/>
当从a 的子级b 跳转到a的同级时。（从子级到父级）会依次执行b a 上的onleave。()<br/>


path 语法：<br/>
:XX 参数值<br/>
(/:name)  内部是可选的可有可无<br/>
* 任意字符 /也在内  *.* 会匹配XX.XX这样的<br/>
如果路由是相对的，那么完整的路径将由它和他的所有祖先节点的路径组合而成<br/>
使用绝对路径可以使路由匹配行为忽略嵌套关系<br/>


路由算法会根据定义的顺序自顶向下匹配路由的。<br/>


ReactRouter是建立在history 之上的，一个history知道如何去监听地址栏的变化，并解析这个url转化为location对象。
然后router用它匹配到路由，最后渲染指定的组件<br/>