从零开始React + Dva + ant.design开发项目—路由

2018-06-05 admin

前言

之前发现了蚂蚁金服的ant.design,感觉这个框架有完整的设计交互规范,组件库丰富,交互友好,代码质量高,稳定性好,然后就一直想要在项目中使用下这个框架,但是之前一直都是用VUE的不怎么会React。今天学习了下怎么去使用React以及Dva,在学习的过程中碰到了以下几个路由相关的问题:

  1. 如何嵌套路由
  2. 如何设置动态路由
  3. 如何异步加载页面

今天我在这里主要是解决这些问题,就不讲相关的基本知识,基本知识不过关的建议大家去https://github.com/dvajs/dva-knowledgemap学习相关知识的最小集。这样帮助大家学习最少的知识最快学会如何使用React + DVA来做项目。

项目初始化

按照ant的官网(https://ant.design/docs/react/practical-projects-cn)的步骤生成一个项目

  1. 安装dva脚手架:npm install dva-cli -g
  2. 创建一个新应用:dva new dva-demo
  3. 进入新生成的应用内:cd dva-demo
  4. 启动应用:npm start;几秒后你就可以看到欢迎页面了
  5. 配置按需加载antd:npm install antd babel-plugin-import -D后修改根目录下的.webpackrc文件,增加如下代码:
{
  "extraBabelPlugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
  ]
}

  1. 重新启动项目:npm start

嵌套路由

  1. 在src/routes创建父页面news.js:
import React from 'react';
import { connect } from 'dva';

function News() {
  return (
    <div>我是新闻页面</div>
  );
}

export default connect()(News);

  1. 在src/routes创建子页面newsList.js:
import React from 'react';
import { connect } from 'dva';

function NewsList() {
  return (
    <div>我是新闻列表页面</div>
  );
}

export default connect()(NewsList);

  1. 在src/router.js中增加news页面:
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import News from './routes/news';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/news" component={News} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

  1. 修改src/routes/news.js页面,在news页面中增加子页面的声明:
import React from 'react';
import { Route } from 'dva/router';
import { connect } from 'dva';
import NewsList from './newsList';

function News({match}) {
  return (
    <div>
      <span>我是新闻页面</span>
      <Route path={`${match.url}/list`} exact component={NewsList}></Route>
    </div>
  );
}

export default connect()(News);

这个时候你在浏览器中输入:http://localhost:8000/#/news/list就可以看到: 我是新闻页面 我是新闻列表页面

动态路由

  1. 在src/routes新增页面newsDetail.js:
import React from 'react';
import { connect } from 'dva';

function NewsDetail({match}) {
  return (
    <div>
      我是新闻详情页面{match.params.id}
    </div>
  );
}

export default connect()(NewsDetail);

  1. 修改src/routes/news.js页面,在news页面中增加子页面的声明:
import React from 'react';
import { Route } from 'dva/router';
import { connect } from 'dva';
import NewsList from './newsList';
import newsDetail from './newsDetail';

function News({match}) {
  return (
    <div>
      <span>我是新闻页面</span>
      <Route path={`${match.url}/list`} exact component={NewsList}></Route>
      <Route path={`${match.url}/detail/:id`} exact component={newsDetail}></Route>
    </div>
  );
}

export default connect()(News);

  1. 访问http://localhost:8000/#/news/detail/1你会看到: 我是新闻页面 我是新闻详情页面1

异步加载页面

异步加载页面的功能主要是参考博客:https://www.jianshu.com/p/dc867f5d28b1 解决的,我在这里主要是帮助大家快速解决问题,如果大家对具体的实现感兴趣,可以去看看这篇文章。

  1. 首先在src/utils下新建工具类asyncComponent.js,用来异步加载组件:
import React, { Component } from "react";

export default function asyncComponent(importComponent) {
  class AsyncComponent extends Component {
    constructor(props) {
      super(props);

      this.state = {
        component: null
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C ? <C {...this.props} /> : null;
    }
  }

  return AsyncComponent;
}

  1. 修改各个导入页面的方式: src/router.js中
import IndexPage from './routes/IndexPage';
import News from './routes/news';

变成

import asyncComponent from './utils/asyncComponent.js';
const IndexPage = asyncComponent(() => import('./routes/IndexPage'));
const News = asyncComponent(() => import('./routes/news'));

src/routes/news.js:

import NewsList from './newsList';
import newsDetail from './newsDetail';

变成

import asyncComponent from '../utils/asyncComponent.js';
const NewsList = asyncComponent(() => import('./newsList'));
const newsDetail = asyncComponent(() => import('./newsDetail'));

大功告成,这样就可以实现页面的异步加载了,同样的咱们的页面其实也是Reac的一个组件,所以这个方法还可以用来异步加载其他的组件。

参考文章

React-Router 4.2 的嵌套路由实现:https://blog.csdn.net/arsiya_jerry/article/details/78122827 react-router 4.x的异步组件加载(Code Splitting):https://www.jianshu.com/p/dc867f5d28b1

[转载]原文链接:http://www.divpc.cn/post/detail/108?from=juejin

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-33436.html

文章标题:从零开始React + Dva + ant.design开发项目—路由

相关文章
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
为你的 VS Code 搭建远程开发环境
开篇先说一下自己遇到的烦恼,介绍下写这篇文章的背景。我有一台低配的 MacBook 和 一台性能强悍的台式机。之前自己都是在 Mac 上跑前端项目的,那台台式机基本上处于闲置状态,偶尔用来看看文档。后来随着自己需要做服务端开发,有时候需要同...
2018-02-26
哪些互联网产品适合用HTML5开发?
J.P. Morgan(摩根大通集团)不久前发布了有关2013年互联网公司股票的研究报告,其中在预测2013年趋势时,提及移动互联网有关web和app之间的辩论将在3到5年内继续,而摩根认为这对于搜索产品和谷歌是利好消息,因为用户需要处理复...
2015-11-12
Node.js v0.11.16 开发版发布
Node.js v0.11.16 开发版发布了,改进记录包括: openssl: Upgrade to 1.0.1l npm: Upgrade to 2.3.0 url: revert support of path for url.fo...
2015-11-12
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
回到顶部