简介: 刚入手一个服务器 打算搭个个站, 平时工作都是用vue ;为了扩展自己的实战能力 来从头开始实战用用react吧;结合ant-design一起开发,然后后台nodejs来写; 编写我的第一个教程文章,从头到尾记录整个过程 因为是实战项目;部分基础的创建react的和基本语法什么的话各位就自便了 如果有需要的话 我是可以开篇博客的;需要的留言— —
ღ( ´・ᴗ・` )比心
因为并不是很熟悉这两个框架 所以如果有做的不好的 请各位大神指导下小弟 谢谢了
作者:webmxj
csdn博客名:div_ma
联系方式:[email protected]
微信:webmxj
QQ交流群:734585334
QQ:642525655 加我请备注前端
相关链接:
react+ant.design 从零开始搭建个人博客实战01 —— 起步
react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
react+ant.design 从零开始搭建个人博客实战03 —— 路由
react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用
路由是单页面应用的重要组成部分 之前我们已经配置过基本的路由了 不过不清楚的话可以返回去看一下react+ant.design 从零开始搭建个人博客实战01 —— 起步
现在根据不同的菜单对其配置不同的子路由
1.根据菜单在routes文件夹中新建好要显示的对应页面文件夹以及文件
2.修改一下router.js 把exact属性加到默认路径’/‘的那个Route标签上
exact表示是否精准匹配 不加的话 就是广泛匹配,那么只要出现了‘/’ 无论你后面的路由怎么变 是‘/login’ 还是’/home’, '/'指向的那个组件都会出现
但相对的;加了exact精准匹配的组件也没办法继续往下加子路由了 因为不是百分之一百一直的路由的话组件是不会出现的
3.把页面引入到DefaultLayout.js中 并引入Route组件
然后通过this.props.match.url获取原有的路径 再它后面加上我们赋予他的的不同路径 然后打开localhost:3000/home 和localhost:3000/home/about 就可以看到不同路径显示不同页面的效果了 ;
this.props是react内置的对象 我们可以从它上面拿到很多有用的信息
http://localhost:3000/#/home页面截图如下
http://localhost:3000/#/home/about页面截图如下
4.修改头部导航部分 添加点击跳转路由事件
修改HeadNav.js 的代码如下:
/**
* Created by webmxjon 2018/5/25.
*/
import React,{Component} from 'react';
import {Menu,Icon} from 'antd'
import './HeadNav.less'
import {Link} from 'react-router-dom'
export default class HeadNav extends Component {
state = {
current: 'home',
}
handleClick=(e)=>{ //点击事件
this.setState({current:e.key});
}
render(){
return (
<div id="HeadNav">
<div className="nav-wrap">
<div className="nav-logo-wrap">
<Icon type="global" className="nav-logo" />
</div>
<div className="nav-list-wrap">
<Menu
selectedKeys={[this.state.current]}
mode="horizontal"
onClick={this.handleClick}
>
<Menu.Item key="home">
<Link to="/home">首页</Link>
</Menu.Item>
<Menu.Item key="aboutme">
<Link to="/home/about">关于我</Link>
</Menu.Item>
<Menu.Item key="article">
<Link to="/home/article">文章分享</Link>
</Menu.Item>
<Menu.Item key="resource" >
<Link to="/home/resource">资源共享</Link>
</Menu.Item>
</Menu>
</div>
</div>
</div>
)
}
}
如上修改添加link标签和点击事件就可以实现点击标签时切换界面了
效果如下:
到这部分的源码git地址:https://github.com/mmxj/blogs
接着准备用mock.js去模拟后台数据 布局页面 然后最后用nodejs去写后台功能
相关链接:
react+ant.design 从零开始搭建个人博客实战01 —— 起步
react+ant.design 从零开始搭建个人博客实战02 —— 页面布局 公用头部尾部
react+ant.design 从零开始搭建个人博客实战03 —— 路由
react+ant.design 从零开始搭建个人博客实战04 —— 配置json-server 提供虚拟数据
react+ant.design 从零开始搭建个人博客实战05 —— 生成随机数据 mockjs的使用