umi搭建react+antd项目（二）路由

1.我们在src下新增index2.js：

import React, {Component} from 'react';export default class index2 extends Component {constructor(props) {super(props);}render() {return (<div>index2</div>)}
}

2.访问http://localhost:8000/index2

页面发生了变化，但是头部没有变化，因为头部是公共的，代码在src/layouts/index.js中

3.路由之间跳转，修改index.js，点击小丑图片，即可跳转

import React, {Component} from 'react';
import Link from 'umi/link';export default class index extends Component {constructor(props) {super(props);}render() {return (<div><Link to="/index2">index</Link></div>)}
}

命令式,修改index2.js

import React, {Component} from 'react';
import router from 'umi/router';export default class index2 extends Component {constructor(props) {super(props);}goToListPage() {router.push('/');}render() {return (<div onClick={this.goToListPage.bind(this)}>index2</div>)}
}

umi路由约定规则：

+ pages/+ users/- index.js- list.js- index.js

那么，umi 会自动生成路由配置如下：

[{ path: '/', component: './pages/index.js' },{ path: '/users/', component: './pages/users/index.js' },{ path: '/users/list', component: './pages/users/list.js' },
]

参考，不做细解释：https://umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1

umi搭建react+antd项目（二）路由相关推荐

umi搭建react+antd项目（一）环境配置
1.先创建文件夹,windows用户手动创建就行了 mkdir myReact && cd myReact 2.在myReact目下,执行脚手架命令,默认选择antd yarn cre ...
umi搭建react+antd项目（六）父子组件通讯
上一篇写了一个子组件,只是把值传入进来,这篇讲解在子组件修改父组件的数据 1.在index.js里,新增方法:updateImg 用于修改list集合 updateImg() {this.setSta ...
umi搭建react+antd项目（五）子组件编写
上一篇在index.js里面写了一个组件,不是很友好,我们现在分开写组件 1.新建component文件夹用于放置组件,src/component,新建list组件 import React, {Co ...
umi搭建react+antd项目（四）axios请求数据
1.下载axios yarn add axios 2.在src下新建文件夹conf,再新增js文件:axiosConf.js import axios from 'axios'axios.defaul ...
umi搭建react+antd项目（三）Mock 数据--模拟数据
1.添加mockjs yarn add mockjs 2.在mock目录下新建test.js List|10,返回list,10条数据 @image,随机生成img的url链接,mock内置函数 im ...
从零开始搭建React开发项目之抖音“剪映”——创作课堂（基础入门篇）
前言 React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高,对于很多新手来说可能很多人都在犹豫是选react还是vue,如果时间充裕的话还是首选r ...
React Native项目配置路由和选项卡导航__React Navigation的使用
React Native 配置路由在网上看了很多例子跟着写,发现都不行,发现之前的写法都已经弃用了,跟着官方一步步来吧. 参考官方文档:React Navigation 先创建好项目: npx re ...
用yeoman搭建react画廊项目笔记
1.安装yeoman npm install yo -g yo --version //检测 yeoman版本,成功显示版本号,则安装成功 2.到yeoman官网 http://yeoman.io ...
使用webpack2.0 搭建react.js项目
最近一段时间没有写react.js,发现webpack已经完全升级为2.0了,升级后导致以前的项目不能正常编译,只能重新实践一番关于webpack2.0和1.x的区别概括起来就是tree shaki ...

umi搭建react+antd项目（二）路由

umi搭建react+antd项目（二）路由相关推荐

最新文章

热门文章