react router用法实例以及其中的一些坑

这几天因为项目需要，所以研究了一下react router这个东西，不得不说的是github是强大的，但是其中不免还是有些坑的，那么这些坑是在哪里呢，直接来看代码吧。。。。

首先既然我们用的是react，那么关于webpack的对于es6的那些配置我就不细说了，因此下面我们直接上es6的代码

importReact,{Component}from'react'
import{render}from'react-dom'
import{Router,Route,Link,browserHistory}from'react-router'

首先我们导入react一些必要的工具包

然后我们先写一下首页的导航内容，这里为了区分被点击的链接，所以我加了一个ACTIVE的样式做区别

constACTIVE={color:'red'}

classAppextendsComponent{
render(){
return(
<div>
<h1>APP!</h1>
<ul>
<li><Linkto="/"activeStyle={ACTIVE}>/</Link></li>
<li><Linkto="/about"activeStyle={ACTIVE}>/about</Link></li>
<li><Linkto="/inbox"activeStyle={ACTIVE}>/inbox</Link></li>
</ul>
//这里是第一个坑点，在官方的github上并没有写这里的内容，
//而这里的this.props.children是为了替换<Child/>
//这样router就会帮我们找到这个children
{this.props.children}
</div>
)
}
}

OK，别急，我们先把入口文件写完，上面我们把配置都做完了，接下来就是要引入，

letroutes=(
<Routepath="/"component={App}>
<Routepath="/about"component={About}/>
<Routepath="/inbox"component={Inbox}/>
</Route>
)
//这里是第二个坑点，看过官方github的朋友都知道，
//在Router这个标签里面会有一个属性history={browserHistory}
//然而如果在这里加上了上面的这个属性之后，就会出现一个问题
//在选择url的时候会工作正常，但是当refresh这个页面的时候
//就会出现cannotget/...
render((<Router>{routes}</Router>),document.getElementById('app'))

好啦，入口文件我们已经完成了，那么接下来就要做组件内容了

这里我们为了更好区分组件与入口文件，所以将它们分在了不同的文件内，

那么这里我们就要先引入组件文件

importAboutfrom'./compoment/about.jsx'
importInboxfrom'./compoment/inbox.jsx'

ok,那么组件中我们就要这么来写了，以about为例

importReact,{Component}from'react';

module.exports=classAboutextendsComponent{
render(){
return(
<h2>
About
</h2>
)
}
};

好啦，react还是很强大的，而且很多用法也很骚，如果有不同意见的朋友我们可以好好交流，嘿嘿

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!