一定有很多小伙伴比较关心前端路由router这个东西，以为之前我们一直在用项目路由，甚至每一个html就要用一个路由。而没有接触过前端路由的小伙伴又不知道该从何入手。这一小节，我们继续前面的代码，开始添加react-router。
通过在cmd小黑窗找到之的项目地址，然后 npm start 命令启动React项目。
1、
这一节我们要说的是路由，所有就涉及到页面跳转，如图：
在页面顶部添加 “登录” 按钮，点击按钮跳转到登录页面去。
找到之前js/top.js添加代码
const TopLoginBtn = () =>({ render: function(){ return ( <a className="index_lobtn">登录</a> ); } })
然后在AppTop方法中插入T opLoginBtn：
const AppTop = () => ({ render: function(){ return ( <header> <h1>{this.props.word}</h1> <TopLoginBtn /> </header> ); } });
这样就把所谓的登录按钮加上了
2、然后就是添加路由配置
通过npm下载router组件， npm install react-router-dom ，执行结束后，如果看到node_modules文件夹下有了react-router-dom这个文件夹，证明下载成功了。
然后需要在index.js中引入
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
我们之前在index.js中做了首页的一些内容，最终方法入口是：
ReactDOM.render( <SiteIndex/>, document.getElementById('root') );
首页所有的内容我们都装进了SiteIndex方法中了，现在要做修改了，注意啊，今天是2017年6月8日，如果你看到这篇文章，基本下载的都是router V4.0的了，所以这个写法就是最正确的React-router使用姿势了。
var SiteRouter = React.createClass({ render: function(){ return ( <Router> <div> <Route exact path="/" component={SiteIndex}/> </div> </Router> ); } })
自定义一个SiteRouter方法，这里面的path指向为/，意思就是首页，打开项目的欢迎页，对准的显示内容为SiteIndex。而我们的index.html显示入口也需要做修改：
ReactDOM.render( <SiteRouter/>, document.getElementById('root') );
这个时候，如果你打开浏览器，看到了正常的显示，那么就证明路由添加成功了。
3、路由跳转
这个时候就要在 “登录” 按钮上做手脚了。找到top.js，需要对TopLoginBtn 方法做修改了。
const TopLoginBtn = () =>({ render: function(){ return ( <a className="index_lobtn"><Link to="/login">登录</Link></a> ); } })
注意观察Link标签，他也是路由的一部分，但页面中不会显示出来。光这一步还不够，还需要在index.js中的Router组件中添加内容：
var SiteRouter = React.createClass({ render: function(){ return ( <Router> <div> <Route exact path="/" component={SiteIndex}/> <Route path="/login" component={Login}/> </div> </Router> ); } })
我们添加了对应的path显示路径，和应该对应的Login模块。
4、添加Login模块方法
在js目录下创建 login.js，在后续的项目中，很多模块将单独建立js文件，其实React的狗屎思想认为，项目拆分的越细越好，然后使用组装的形式来完成页面内容。
import React from 'react'; import ReactDOM from 'react-dom'; import AppTop from './top.js'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import '../css/demo.css'; const Login = () => ({ render: function(){ return ( <div> <AppTop word="登录"/> <div className="toindex"><Link to="/">回首页</Link></div> </div> ); } }); export default Login;
这就是login.js模块中的内容，暂时我们先不添加登录功能的代码，因为弄来弄去还是验证，翻来覆去还是ajax请求。
在这个页面中，点击 “回首页”就可以跳转回首页了。
这就是React-router的简单使用姿势。
5、判断加载
之前我们都在说需要什么功能了，就去加载什么，但就好比顶部的这个 “登录”按钮，他是跟着顶部的AppTop这个大方法走的，我们得判断登录成功后就不显示按钮了，未登录状态的时候才实现这个按钮。这个时候需要在top.js的AppTop这个方法中做修改了。
登录状态我们就暂时不加了，把需求改一下，当判断当前是登录页面的时候，不显示 “登录”按钮。修改如下：
const AppTop = () => ({ render: function(){ var showLogin = this.props.word; var showTag; if(showLogin == "登录"){ showTag = ""; }else{ showTag = <TopLoginBtn /> } return ( <header> <h1>{this.props.word}</h1> {showTag} </header> ); } });
通过传递的props值来判断，达到了我们想要的需求。
