刘贵学博客

Ant Design Mobile 渐进系列教程 3:路由

1. 目标

本文会介绍 ADM框架中如何使用 React-Router, 在开始本章之前,请先阅读 阮一峰的博文 React Router 使用教程

首先,我们要问一个问题:为什么要使用 Router ?

由于我们用React开发的App基本都属于SPA(单页面应用)架构,SPA应用的复杂功能,还是会抽成多个虚拟页面来降低复杂度。

  • 实体页面之间的切换,基本是透过不同的 URL来区分;
  • 但虚拟页面之间的切换,最简单的方法是关联到 URL锚标记 ,比如:

React-Router 就是通过管理 URL,实现 React 组件的切换和状态的变化,复杂的应用都会用到路由,本文会将 React-Router 引入 我们的App。

2. 原型图

实现的功能如下:

注意:Index、List 与 Setting 这三个页面都会共用 Main页面的内容。

3. 实现

3.1 环境安装

npm install --save react-router

3.2 index.web.js 在入口处 填写 Router映射

import React from 'react';
import ReactDOM from 'react-dom';

import Main       from './pages/Main';
....


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


let RouterMap =(
  <Router history={hashHistory}>

    <Route path="/login"    component={Login} />
    <Route path="/register" component={Register} />
  
      <Route path="/"       component={Main}>
        <IndexRedirect to="index"/>
        <Route path="/index"    component={Index}/>
        <Route path="/list"     component={List}/>
        <Route path="/setting"  component={Setting}/>
      </Route>
  </Router>
);

ReactDOM.render(RouterMap, document.getElementById('root'));

3.3 pages/Main.js 抽成共用组件

<ContextBox>
    {this.props.children}
</ContextBox>

3.4 pages/Index.js 页面

import React from 'react';

export default React.createClass({
  render() {
    return (
      <p>TODO 主页</p>
    );
  },
});

其他几个页面类似:

  • pages/List.js
  • pages/Setting.js
  • pages/Login.js
  • pages/Register.js

4 测试结果

切换 URL 的锚标记 可以完成 页面组件的切换。

本文所有代码可以下载:

git clone git@git.coding.net:guixue/antdm-demo.git
cd antdm-demo
git checkout demo3

为了长期交流,antdm-demo 仓库被为私有,注册 coding.net 后, 加 guixue 为好友后,会添加进来。