react-router笔记

一、安装
npm install -s react-router
二、引用
import { Router } from 'react-router';
三、格式
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
router组件本身只是个容器,
route定义组件(封装好的组件)
四、路由嵌套
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
上面代码中,用户访问/repos时,会先加载App组件,然后在它的内部再加载Repos组件。
五、path属性
Route组件的path属性指定路由的匹配规则
六、path属性通配符
<Route path="/hello/:name">
// 匹配 /hello/michael
// 匹配 /hello/ryan

<Route path="/hello(/:name)">
// 匹配 /hello
// 匹配 /hello/michael
// 匹配 /hello/ryan

<Route path="/files/*.*">
// 匹配 /files/hello.jpg
// 匹配 /files/hello.html

<Route path="/files/*">
// 匹配 /files/
// 匹配 /files/a
// 匹配 /files/a/b

<Route path="/**/*.jpg">
// 匹配 /files/hello.jpg
// 匹配 /files/path/to/file.jpg
七、通配符的规则
1:paramName
:paramName匹配URL的一个部分,直到遇到下一个/、?、#为止。这个路径参数可以通过 this.props.params.paramName取出。
2()
()表示URL的这个部分是可选的。
3*
*匹配任意字符,直到模式里面的下一个字符为止。匹配方式是非贪婪模式。
4 **
** 匹配任意字符,直到下一个/、?、#为止。匹配方式是贪婪模式。
路由匹配规则是从上到下执行,一旦发现匹配,就不再其余的规则了。
八、IndexRoute 组件
指定默认情况下加载的子组件
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>//指定默认加载home
<Route path="accounts" component={Accounts}/>
<Route path="statements" component={Statements}/>
</Route>
</Router>
九、Redirect 组件
<Redirect>组件用于路由的跳转,即用户访问一个路由,会自动跳转到另一个路由。
<Route path="inbox" component={Inbox}>
{/* 从 /inbox/messages/:id 跳转到 /messages/:id */}
<Redirect from="messages/:id" to="/messages/:id" />
</Route>
十、IndexRedirect 组件
IndexRedirect组件用于访问根路由的时候,将用户重定向到某个子组件。
<Route path="/" component={App}>
<IndexRedirect to="/welcome" />
<Route path="welcome" component={Welcome} />
<Route path="about" component={About} />
</Route>
十一、Link
它基本上就是<a>元素的React 版本,可以接收Router的状态。

    A+
发布日期:2017年07月09日  所属分类:JavaScript
标签:
李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:3   其中:访客  2   博主  1

  1. avatar linode 0

    朋友 交换链接吗

  2. avatar seo原创文章代写 1

    楼主您好,我们可以交换友链吗