狗屎一樣的React（第八節，React-router）

一定有很多小夥伴比較關心前端路由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值來判斷，達到了我們想要的需求。