狗屎一样的React（第八节，React-router 4.0的使用姿势）

一定有很多小伙伴比较关心前端路由router这个东西，以为之前我们一直在用项目路由，甚至每一个html就要用一个路由。而没有接触过前端路由的小伙伴又不知道该从何入手。这一小节，我们继续前面的代码，开始添加react-router。

通过在cmd小黑窗找到之的项目地址，然后 npm start 命令启动React项目。

1、

这一节我们要说的是路由，所有就涉及到页面跳转，如图：

在页面顶部添加 “登录” 按钮，点击按钮跳转到登录页面去。

找到之前js/top.js添加代码

const TopLoginBtn = () =>({
render: function(){
return (
<a className="index_lobtn">登录</a>
);
}
})

然后在AppTop方法中插入TopLoginBtn：

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值来判断，达到了我们想要的需求。