React+Ant.design 从零开始搭建个人博客实战教程03 ——路由

最新推荐文章于 2025-10-30 11:05:40 发布

原创最新推荐文章于 2025-10-30 11:05:40 发布 · 置顶 · 1.5w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#react #ant-design #router #路由 #前端

js 同时被 3 个专栏收录

22 篇文章

订阅专栏

html+css

10 篇文章

订阅专栏

react

6 篇文章

订阅专栏

简介：刚入手一个服务器打算搭个个站，平时工作都是用vue ；为了扩展自己的实战能力来从头开始实战用用react吧；结合ant-design一起开发，然后后台nodejs来写；编写我的第一个教程文章，从头到尾记录整个过程因为是实战项目；部分基础的创建react的和基本语法什么的话各位就自便了如果有需要的话我是可以开篇博客的；需要的留言— —
ღ( ´･ᴗ･` )比心

因为并不是很熟悉这两个框架所以如果有做的不好的请各位大神指导下小弟谢谢了

作者：webmxj
csdn博客名:div_ma
联系方式：webmxj@163.com
微信：webmxj
QQ交流群:734585334
QQ:642525655 加我请备注前端

路由是单页面应用的重要组成部分之前我们已经配置过基本的路由了不过不清楚的话可以返回去看一下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标签和点击事件就可以实现点击标签时切换界面了
效果如下：
这里写图片描述