试着用React写项目-利用react-router解决跳转路由

转载请注明出处：王亟亟的大牛之路

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

---

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

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

npm install -S react-router

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

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

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

Route是具体实施路由的对象

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

---

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

这里写图片描述

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

---

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

<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调用他

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节点会让我们的页面中多出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>
    );
  }
})

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

需要修改的知识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'))

其实现在的内容就是

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

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

这里写图片描述

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

周末愉快！！！