试着用React写项目-利用react-router解决跳转路由等问题（一）

继续本周的大方向，继续学习React，昨天把简单的hi all内容呈现出来后，今天研究如何多页面或者实现页面嵌套， 
开始今天的内容前老规矩，先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android

---

在传统的静态网页里，我们页面跳转通过超级链，页面重定向，转发等等姿势来解决多页面展示和逻辑跳转，而React对这部分做了很好的封装，也做成了 主件。

要是用也是国际惯例，npm下！！

npm install -S react-router
1
1

下完后直接import就可以使用，像这样

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

Router是大壳子，类似于路由容器的东西

Route是具体实施路由的对象

hashHistory表示路由切换的hash值，决定最终结果

---

因为直接的项目结构比较建的随意，所以把目录进行了重新整理，把main.js变成一个大容器，不做任何业务主件使用，像这样。

这一部分 react官方的例子写的很详细很棒，大家也可以看https://github.com/reactjs/react-router-tutorial，或者把他的demo跑一跑 豁然开朗。

---

上面提到了router其实和使用常规主件一样倒入，使用即可最基本的也就是以下这种形式

<Router><<Router>
1
1

我们先来写一个简单的页面

首先是昨天的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>    );  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

然后在我们的main.js调用他

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'))
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12

我们倒入了 first和react-router所用到的相关对象 
Router容器下有一个Route节点会让我们的页面中多出first部分的内容

长这样

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

那我们来建一个页面来让他渲染

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>    );  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这是一个最基本的页面，就不解释了（建议手打，找找手感）

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

render((  <Router history={hashHistory}>    <Route path="/" component={first}></Route>    <Route path="/two" component={two}/>  </Router>), document.getElementById('app'))
1
2
3
4
5
6
7
1
2
3
4
5
6
7

浏览器输入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>    )  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

页面和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'))
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

其实现在的内容就是

<first>    <three></three></first>
1
2
3
1
2
3

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

这一篇简单的介绍下这一套姿势如何简单的使用，其实react大多数功能都是如此，封装的简单易用，下一篇还会讲 路由相关

周末愉快！！！