react基础（1）：介绍了如何创建项目，总结了JSX、组件、样式、事件、state、props、refs、map循环，另外还讲了mock数据和ajax

还是用 react基础1 里创建的项目继续写案例。

react-router

在做单页面应用的时候就需要用到路由了。

首先来看一下我们的项目目录，如下所示：

package.json和webpack.config.js的内容和 react基础（1）一样的。

下面贴一下entries里的文件内容

react2/src/entries/index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Demo</title>

</head>

<body>

<div id="root"></div>

<script src="common.js"></script>

<script src="index.js"></script>

</body>

</html>

react2/src/entries/index.js

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

class App extends Component {

  render(){

    return(

      <div>123</div>

    )

  }

}

ReactDOM.render(

  <App />,

  document.getElementById('root')

)

安装依赖 npm i

启动本地服务 npm start

浏览器打开浏览效果 http://localhost:8989/

效果如下

案例1

react2/src/entries/index.js（其他几个文件不修改）

import React, { Component, PropTypes } from 'react';

import ReactDOM from 'react-dom';

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

class App extends Component {

  render(){

    return(

      <div>

          <ul>

              <li><Link to="/movie">电影</Link></li>

              <li><Link to="/tv">电视剧</Link></li>

          </ul>

          {this.props.children}

      </div>

    )

  }

}

class Tv extends Component {

  render(){

    return(

      <div>

          <ul>

              <li>还珠格格</li>

              <li>来自星星的你</li>

          </ul>

      </div>

    )

  }

}

class Movie extends Component {

  render(){

    return(

      <div>

          <ul>

              <li>暮光之城</li>

              <li>喜剧之王</li>

          </ul>

      </div>

    )

  }

}

const Routes = ({ history }) =>

  <Router history={history}>

    <Route path="/" component={App}>

       <Route path="/tv" component={Tv} />

       <Route path="/movie" component={Movie} />

    </Route>

  </Router>;

Routes.propTypes = {

  history: PropTypes.any,

};

ReactDOM.render(

    <Routes history={hashHistory} />,

    document.getElementById('root')

);

Router、Route、Link这三个大家可以看一下教程了解一下定义，这里不详细讲解：教程戳这里

关于history的教程戳这里。常用的History有三种：browserHistory、hashHistory、createMemoryHistory（从react-router引出）。在声明路由的时候需要指定所选的方式，没有默认选项。

使用hashHistory,浏览器的url是这样的：/#/user/liuna?_k=adseis

使用browserHistory,浏览器的url是这样的：/user/liuna （大家可以自己试试这种，这里就不写案例了）

这个案例写出来的效果类似tab切换

案例2：

react2/src/entries/index.js（其他几个文件不修改）

import React, { Component, PropTypes } from 'react';

import ReactDOM from 'react-dom';

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

class App extends Component {

  render(){

    return(

      <div>

          <ul>

              <li><Link to="/movie">电影</Link></li>

              <li><Link to="/tv">电视剧</Link></li>

          </ul>

          {this.props.children}

      </div>

    )

  }

}

class Tv extends Component {

  render(){

    return(

      <div>

        <Link to="/">返回</Link>

          <ul>

              <li>还珠格格</li>

              <li>来自星星的你</li>

          </ul>

      </div>

    )

  }

}

class Movie extends Component {

  render(){

    return(

      <div>

        <Link to="/">返回</Link>

          <ul>

              <li>暮光之城</li>

              <li>喜剧之王</li>

          </ul>

      </div>

    )

  }

}

const Routes = ({ history }) =>

  <Router history={history}>

    <Route path="/" component={App} />

    <Route path="/tv" component={Tv} />

    <Route path="/movie" component={Movie} />

  </Router>;

Routes.propTypes = {

  history: PropTypes.any,

};

ReactDOM.render(

    <Routes history={hashHistory} />,

    document.getElementById('root')

);

这个效果就相当于是直接跳转了页面，和案例1的tab切换效果不一样的主要代码，如下所示

案例1里面component为Tv和Movie的Route标签是写在component为App的Route标签里的，而案例2里相当于是同级的。

案例3

react2/src/entries/index.js（其他几个文件不修改）

import React, { Component, PropTypes } from 'react';

import ReactDOM from 'react-dom';

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

class App extends Component {

  render(){

    return(

      <div>

          <p>

              <span><Link to="/movie">电影</Link></span>&nbsp;&nbsp;

              <span><Link to="/tv">电视剧</Link></span>

          </p>

          {this.props.children}

      </div>

    )

  }

}

class Home extends Component {

  render(){

    return(

      <div>欢迎你！</div>

    )

  }

}

class Tv extends Component {

  render(){

    return(

      <div>

        <Link to="/">返回</Link>

          <ul>

              <li>还珠格格</li>

              <li>来自星星的你</li>

          </ul>

      </div>

    )

  }

}

class Movie extends Component {

  render(){

    return(

      <div>

        <Link to="/">返回</Link>

          <ul>

              <li>暮光之城</li>

              <li>喜剧之王</li>

          </ul>

      </div>

    )

  }

}

const Routes = ({ history }) =>

  <Router history={history}>

    <Route path="/" component={App}>

      <IndexRoute component={Home}/>

      <Route path="/tv" component={Tv} />

      <Route path="/movie" component={Movie} />

    </Route>

  </Router>;

Routes.propTypes = {

  history: PropTypes.any,

};

ReactDOM.render(

    <Routes history={hashHistory} />,

    document.getElementById('root')

);

从上面的效果图中，可以看到，有“欢迎你！”这个类似首页的东西。

IndexRoute默认路由，当path=“/”时，默认显示Home组件。IndexRoute也是从react-router里引出的。

ps

这篇还是react基础（1）写完以后的存货，好久没有更新了，先把这篇存货发了

react基础（2）的更多相关文章

  1. react基础（1）

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  2. react基础语法（五） state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  3. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  4. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  5. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  6. React 基础入门，基础知识介绍

    React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...

  7. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  8. React 基础入门

    React 起源于 Facebook 内部项目,是一个用来构建用户界面的 Javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组 ...

  9. react基础

    上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...

随机推荐

  1. BotVS开发基础—Python API

    代码 import json def main(): # python API列表 https://www.botvs.com/bbs-topic/443 #状态信息 LogStatus(" ...

  2. 区别jquery对象和dom对象及转换方法

    一.jquery对象 由$() 获取,例如 var div = $("#id"); 这个div是jquery对象,它里面没有dom对象自带的方法.常见的dom对象自带的方法, 例如 ...

  3. 介绍maven构建的生命周期

    介绍maven构建的生命周期 这篇是 https://maven.apache.org/guides/introduction/introduction-to-the-lifecycle.html 的 ...

  4. hdu 3966 Aragorn's Story（树链剖分+树状数组/线段树）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3966 题意: 给出一棵树,并给定各个点权的值,然后有3种操作: I C1 C2 K: 把C1与C2的路 ...

  5. Java的常用操作符

    操作符用于接受一个或多个参数,并生成一个新的值.加号和一元的正号(+).减号和一元的负号(一).乘号(*).除号(/)以及赋值号(=)的用法和大多数编程语言都类似. 操作符作用于操作数,生成一个新值. ...

  6. Spring MVC请求执行流程

    学习Spring MVC时间有点长了,但是最近打算找工作,需要重新了解下,所以又去温故知新了.Spring MVC就是用来写web的框架,简化你写web的一些不必要的流程,让程序员能专注于业务逻辑也就 ...

  7. 6.26学习 异步委托回调函数 VS 多线程 VS 并行处理

    描述: 我现在是轮询着构建实例,然后这个实例去执行一个方法,但是执行方法需要大约10s时间,全部轮询下来需要很长时间.所以我现在要更改,头给了我两个方法,1多线程 2异步委托回调函数. 异步委托回调函 ...

  8. python requests 官方文档

    链接:http://docs.python-requests.org/zh_CN/latest/user/quickstart.html

  9. 分享一个 jmeter ant的build.xml

    <?xml version="1.0" encoding="UTF-8"?> <project name="ant-jmeter-t ...

  10. 创建DNS子域及view

    author:JevonWei 版权声明:原创作品 子域 子域同父域在同一个服务器上 新建子域jevon.danran.com vim /etc/named.rfc1912.zones zone &q ...