最初的时候,只使用了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. mysql 查询表死锁 和结束死锁的表步骤以及锁表等级

    1.查询是否锁表show OPEN TABLES where In_use > 0; 2.查询进程 show processlist  查询到相对应的进程===然后 kill    id 补充: ...

  2. CodeForces-884D:Boxes And Balls(合并石子)

    Ivan has n different boxes. The first of them contains some balls of n different colors. Ivan wants ...

  3. iOS 深拷贝、浅拷贝、自定义对象拷贝简介

    copy语法的目的:改变副本的时候,不会影响到源对象: 深拷贝:内容拷贝,会产生新的对象.新对象计数器置为1,源对象计数器不变. 浅拷贝:指针拷贝,不会产生新的对象.源对象计数器+1. 拷贝有下面两个 ...

  4. 「LuoguP1145」 约瑟夫(打表

    Description n 个人站成一圈,从某个人开始数数,每次数到 m 的人就被杀掉,然后下一个人重新开始数,直到最后只剩一个人.现在有一圈人, k 个好人站在一起, k 个坏人站在一起.从第一个好 ...

  5. Python的多进程锁的使用

    很多时候,我们需要在多个进程中同时写一个文件,如果不加锁机制,就会导致写文件错乱 这个时候,我们可以使用multiprocessing.Lock() 我一开始是这样使用的: import multip ...

  6. MYSQL数据库学习----MYSQL函数

    MYSQL函数分为几种 数学函数 字符串函数 日期和时间函数 条件判断函数 系统信息函数 加密函数 格式化函数 一:数学函数 主要使用的几个数学函数 1 ABS()----绝对值函数 eg. SELE ...

  7. jQuery 引用地址(包括jquery和google提供的地址), 节省你不必要的流量

    转载自:http://www.cnblogs.com/henw/archive/2011/09/30/2196255.html 你可以使用这句代码读取jQuery的最新版本的代码文件. jquery官 ...

  8. 【215】◀▶ IDL 文件操作说明 (黑底)

    参考:I/O - General File Access Routines —— 基本文件操作函数 01   CD 修改当前的工作空间路径. 02   FILE_SEARCH 对文件名进行特定的查找. ...

  9. 024--python re、logging、configparser、hashlib模块

    一.re模块 re模块又称正则表达式是一种小型的.高度专业化的编程语言,(在Python中)它内嵌在Python中,并通过 re 模块实现.正则表达式模式被编译成一系列的字节码,然后由用 C 编写的匹 ...

  10. 黑客攻防技术宝典web实战篇:攻击本地编译型应用程序习题

    猫宁!!! 参考链接:http://www.ituring.com.cn/book/885 随书答案. 1. 如果不采用特殊的防御措施,为什么栈缓冲区溢出比堆溢出更容易被攻击者利用? 利用基于栈的溢出 ...