轉(zhuǎn)載請注明出處：王亟亟的大牛之路

繼續(xù)本周的大方向，繼續(xù)學習React，昨天把簡單的hi all內(nèi)容呈現(xiàn)出來后，今天研究如何多頁面或者實現(xiàn)頁面嵌套，
開始今天的內(nèi)容前老規(guī)矩，先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android

在傳統(tǒng)的靜態(tài)網(wǎng)頁里，我們頁面跳轉(zhuǎn)通過超級鏈，頁面重定向，轉(zhuǎn)發(fā)等等姿勢來解決多頁面展示和邏輯跳轉(zhuǎn)，而React對這部分做了很好的封裝，也做成了 主件。

要是用也是國際慣例，npm下！！

npm install -S react-router

下完后直接import就可以使用，像這樣

import { Router, Route, hashHistory } from 'react-router';

Router是大殼子，類似于路由容器的東西

Route是具體實施路由的對象

hashHistory表示路由切換的hash值，決定最終結(jié)果

因為直接的項目結(jié)構(gòu)比較建的隨意，所以把目錄進行了重新整理，把main.js變成一個大容器，不做任何業(yè)務主件使用，像這樣。

這里寫圖片描述

這一部分 react官方的例子寫的很詳細很棒，大家也可以看https://github.com/reactjs/react-router-tutorial，或者把他的demo跑一跑 豁然開朗。

上面提到了router其實和使用常規(guī)主件一樣倒入，使用即可最基本的也就是以下這種形式

<Router><<Router>

我們先來寫一個簡單的頁面

首先是昨天的ui搬家到了新的first.js

import React from 'react';
import styled from 'styled-components';
import { Router, Route, hashHistory } from 'react-router';

const Input = styled.input`
  font-size: 1.25em;
  padding: 0.5em;
  margin: 0.5em;
  color: palevioletred;
  background: papayawhip;
  border: none;
  border-radius: 3px;

  &:hover {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
  }
`;
const H1 = styled.h1`
  background-color: #a1a
`;

export default React.createClass({
  render() {
    return (
      <div>
          <Input placeholder="@mxstbr" type="text" />
          <H1>i am first h1</H1>
      </div>
    );
  }
})

然后在我們的main.js調(diào)用他

import React from 'react';
import { render } from 'react-dom';
import { Router , Route , hashHistory } from 'react-router';
import first from './first';


render((
  <Router history={hashHistory}>
    <Route path="/" component={first}/>
  </Router>
), document.getElementById('app'))

我們倒入了 first和react-router所用到的相關對象
Router容器下有一個Route節(jié)點會讓我們的頁面中多出first部分的內(nèi)容

長這樣

這里寫圖片描述

那我如果要路由到其他頁面呢？

那我們來建一個頁面來讓他渲染

two.js

import React from 'react';
import styled from 'styled-components';

const H3= styled.h3`
  background-color: #a11
`;
export default React.createClass({
  render(){
    return (
      <H3>i am two h3</H3>
    );
  }
})

這是一個最基本的頁面，就不解釋了（建議手打，找找手感）

需要修改的知識main.js里的render部分

render((
  <Router history={hashHistory}>
    <Route path="/" component={first}></Route>
    <Route path="/two" component={two}/>
  </Router>
), document.getElementById('app'))

瀏覽器輸入http://localhost:8080/#/two 看看效果吧

因為主件可以是單一控件，也可以是試圖組，所以Router也是，它可以嵌套多個<route>

新建一個 three.js試試吧

import React from 'react';
import styled from 'styled-components';

const H2 = styled.h2`
  color: #eee
`;

export default React.createClass({
  render(){
    return(
      <H2>i am three H2</H2>
    )
  }
})

頁面和two.js一樣所以可以copy下。

我們強行讓three嵌套入first

修改如下

render((
  <Router history={hashHistory}>
    <Route path="/" component={first}>
      <Route path="/three" component={three}/>
    </Route>
    <Route path="/two" component={two}/>
  </Router>
), document.getElementById('app'))

其實現(xiàn)在的內(nèi)容就是

<first>
    <three></three>
</first>

輸入http://localhost:8080/#/three看看吧

這里寫圖片描述

這一篇簡單的介紹下這一套姿勢如何簡單的使用，其實react大多數(shù)功能都是如此，封裝的簡單易用，下一篇還會講 路由相關

周末愉快！！！