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. pwnable.kr brainfuck之write up

    I made a simple brain-fuck language emulation program written in C. The [ ] commands are not impleme ...

  2. 微服务从设计到部署（二）使用 API 网关

    链接:https://github.com/oopsguy/microservices-from-design-to-deployment-chinese 译者:Oopsguy 本书的七个章节是关于设 ...

  3. linux下权限问题思考

    今天遇到一些关于linux的权限问题,文件的所有者,文件的所属组等问题,文件对于所有者所属组是非常敏感的,同一个脚本所属者所属组不同,得到执行的结果也是差很多的.

  4. Django 模板.html中 href参数传入

    在Django模板中可能会出现访问多个URL指向同一函数,为减少代码可以利用正则表达式实现 url(r'^remove_userinfo(?P<nid>\d+)/',views.remov ...

  5. QQ无法通过ISA2006&TMG2010代理收发图片问题解决

    近期公司有业务需求通过TMG访问QQ,但配置多次均无法通过QQ收发图片,文字输入正常. 目前已解决,供参考: 这个问题是SSL端口默认使用了443,但QQ的离线文件不使用这个端口.所以ISA会把QQ的 ...

  6. 读取xml文件中节点

    /// <summary> /// /// </summary> /// <param name="xmlpath">节点路径</para ...

  7. ctf常见php弱类型分析

    1. 布尔反序列化 $unserialize_str = $_POST['password']; $data_unserialize = unserialize($unserialize_str); ...

  8. JS中的函数和BOM

    文档注释:开头两个*.写在函数上方,在调用函数时, 可以看到文档中的描述信息:function aaa(){ } [函数的声明及调用] 1.函数的声明格式: function 函数名(参数1,参数2, ...

  9. Gvim安装nerd_tree插件

    1.先去官网下载nerd_tree插件 http://www.vim.org/scripts/script.php?script_id=1658 2.解压缩将nerd_tree目录下的doc目录和pl ...

  10. 编辑sass报错：error style.scss (Line 3: Invalid GBK character "\xE5")解决办法

    cmd.exe /D /C call C:/Ruby23-x64/bin/scss.bat --no-cache --update header.scss:header.css error heade ...