这几天因为项目需要,所以研究了一下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还是很强大的,而且很多用法也很骚,如果有不同意见的朋友我们可以好好交流,嘿嘿