最初的时候,只使用了antd中的menu,header和footer都是自己写的组件,在写路由时,总是报如下错误:

相关的路由配置如下:

在网上查的说是组件未暴露出去或者是return 这一行必须有个括号或者标签,我检查了我自己的代码,以上两项都没有问题。不知道改如何解决这个问题。

于是采用antd的layout布局,直接在webpack的入口文件的位置,配置相关的路由即可,如下:

但这样的话就把所有的路由写到了一个文件里,感觉很复杂,而且在这个文件里还要写头部的一些配置和布局,还要引入其他的组件,很繁琐。

最好是可以将路由配置写成一个模块再引入,下一次需要配置时直接在模块中修改添加即可,但是具体应该如何写这个模块,暂未在网上找到相关的教学资料,待以后再优化。

react ant design路由配置的更多相关文章

  1. React + Ant Design网页,配置

    第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步:  https://blog.csdn.net/u0129070 ...

  2. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  3. 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

    前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...

  4. (二)React Ant Design Pro + .Net5 WebApi:前端环境搭建

    首先,你需要先装一个Nodejs,这是基础哦.如果没有这方面知识的小伙伴可以在园子里搜索cnpm yarn等关键字,内容繁多,此不赘述,参考链接 一. 简介 1. Ant Design Pro v5 ...

  5. react中的路由配置踩坑记

    react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方. 此时如果想进行严格匹配 ...

  6. React / Ant Design Pro 实现Canvas画布实时自适应

    如何实现canvas根据父容器进行自适应? Ant Design的组件都提供了强大的自适应能力,为了对齐父组件,镶嵌在Ant Design组件里的canvas也需要能根据父级容器进行自适应的能力,页面 ...

  7. (九)React Ant Design Pro + .Net5 WebApi:后端环境搭建-IdentityServer4-简单配置

    一.简介 IdentityServer4 是用于 ASP.NET Core 的 OpenID Connect 和 OAuth 2.0 框架,通过中间件的方式集成.JWT(json web token) ...

  8. 采用React+Ant Design组件化开发前端界面(一)

    react-start 基础知识 1.使用脚手架创建项目并启动 ​ 1.1 安装脚手架: npm install -g create-react-app ​ 1.2 使用脚手架创建项目: create ...

  9. react+ant design Breadcrumb面包屑组件

    import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...

随机推荐

  1. 自制简单的range(Vue)

    废话不多说先上成果图 实现思路 主要分界面与逻辑两大块 界面分为5个部分 左滑块长度 左内容位置 中间长度 右滑块长度 右内容位置 逻辑 touch3个事件 各滑块长度及位置计算 选中时变色 具体实现 ...

  2. POJ2251 Dungeon Master —— BFS

    题目链接:http://poj.org/problem?id=2251 Dungeon Master Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  3. 一步一步学Silverlight 2系列(20):如何在Silverlight中与HTML DOM交互(下)

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  4. Android控件之CalendarView 日历对话框

    在Android 3.0中新增的日历视图控件可以显示网格状的日历内容,android.widget.CalendarView是从android.widget.FrameLayout中继承. Calen ...

  5. 【旧文章搬运】Windows句柄表格式

    原文发表于百度空间,2009-02-28========================================================================== 句柄是Wi ...

  6. 图的理解:深度优先和广度优先遍历及其 Java 实现

    遍历 图的遍历,所谓遍历,即是对结点的访问.一个图有那么多个结点,如何遍历这些结点,需要特定策略,一般有两种访问策略: 深度优先遍历 广度优先遍历 深度优先 深度优先遍历,从初始访问结点出发,我们知道 ...

  7. Table View Programming Guide for iOS---(七)---Managing Selections

    Managing Selections 管理选择 When users tap a row of a table view, usually something happens as a result ...

  8. AppBoxFuture(七): 分布式外键约束

      关系数据库与NoSql其中的一个主要区别是具备完整的外键约束,虽说现在一些大厂在设计数据存储结构时禁止使用外键约束,靠业务逻辑来保证数据完整性,但考虑到是人就会犯错,为了保证关键业务数据的完整性, ...

  9. E20180420-hm

    prior adj. 优先的; 占先的; 在…之前 alignment n. 结盟; 队列,排成直线; 校直,调整; [工] 准线; align  vt. 使成一线,使结盟; 排整齐    vi. 排 ...

  10. hdoj2159【二位费用背包】

    题意: 略: 推荐看一下那个背包九讲,第五讲非常清晰啊. 原文: 算法 费用加了一维,只需状态也加一维即可.设f[i][v][u]表示前i件物品付出两种代价分别为v和u时可获得的最大价值.状态转移方程 ...