一、报警如图:

二、查找路由版本

我使用路由版本是4.3.1的,然后我测试所有4.0+版本都会出现以上警告。

三、未解决前的代码

三、我又解读了一下报警告内容的大致意思:就是props需要通过函数返回而不是对象。那是不是可以换种写法把props当作参数传递给路由呢。然后就尝试了一下props传的方式。果不其然不报警告了。

解决React路由跳转时出现的红色警告: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.的更多相关文章

  1. React报错Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`

    引言 最近在忙毕业设计,博客也很久没更新了,毕业设计使用vue做了一个校园寻物网站,现在开始学Raect,记录一下自己遇到问题,react-redux的connect方法使得组件与Redux建立了联系 ...

  2. VUE - 路由跳转时设置动画效果

    /* 为对应的路由跳转时设置动画效果 */   <transition name="fade">         <router-view />     & ...

  3. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

  4. 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题

    前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...

  5. 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

    摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...

  6. vue路由跳转时判断用户是否登录功能

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以 ...

  7. 2种方式解决vue路由跳转未匹配相应路由避免出现空白页面或者指定404页面

    https://www.cnblogs.com/goloving/p/9254084.html https://www.cnblogs.com/goloving/p/9254084.html 1.路由 ...

  8. react 路由跳转问题

    1.采用Link方法跳转 <Link to="/Index2" > 不要用link,回不来,也不能next </Link> 2.用context控制路由跳转 ...

  9. Vue路由跳转时显示空白页面,iview的使用

    最近在用iview做项目,需要实现登录,注册,忘记密码等功能.iview-admin本来就有登录功能,于是想照葫芦画瓢,实现登录界面的注册,忘记密码页面路由跳转. router.js里路由配置,刚开始 ...

随机推荐

  1. 网络流(EK算法)

    poj1273 #include <iostream> #include <cstdio> #include <cstring> #include <queu ...

  2. jenkins集群(三) -- master和slave配置git

    一.Linux(master)上安装git 1.运行命令:yum -y install git 2.git的默认安装目录是:  二.给Linux下Git配置好秘钥(公钥 + 私钥) 1.添加用户和密码 ...

  3. Python语言及其应用PDF高清完整版免费下载|百度云盘|Python新手入门

    百度云盘:Python语言及其应用PDF高清完整版免费下载 提取码:6or6 内容简介 本书介绍Python 语言的基础知识及其在各个领域的具体应用,基于最新版本3.x.书中首先介绍了Python 语 ...

  4. 16 . Go之网络编程

    互联网的本质 两台计算机之间的通信与两个人打电话原理是一样的. # 1. 首先要通过各种物理连接介质连接 # 2. 找准确对方计算机(准确到软件)的位置 # 3. 通过统一的标准(一般子协议)进行数据 ...

  5. IDEA中配置Project Structure

    本文主要介绍在IDEA中怎么配置项目Project Structure. 若文中有所偏错,望能够留言指正,不胜感激. 不再赘述,直接进入正题: 1. 打开IDEA的Project Structure( ...

  6. break statement not within loop or switch报错

    break statement not within loop or switch. 注意你的循环,可能多加了个分号.for语句后面?

  7. 当asp.net core偶遇docker一(模型验证和Rabbitmq 三)

    继续上一篇 上一篇,从core方式实现了一个Rabbitmq发送队列消息的接口,我们现在需要在模型验证里面加入验证失败就发送消息的部分 [AttributeUsage(AttributeTargets ...

  8. Docker之Ubuntu上使用Docker的简易教程

    Ubuntu上使用Docker的简易教程 原始文档:https://www.yuque.com/lart/linux/fp6cla 说在开头 在天池的比赛中涉及到了docker的使用.经过多番探究,大 ...

  9. Spring Cloud Data Flow用Shell来操作,方便建立CICD

    1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! 之前我们用两篇文章讲解了Spring Cloud Data Flow,例子都是用UI操作的,但我们在Linux系统上经常是无 ...

  10. Navicat15安装教程

    本文内容皆为作者原创,如需转载,请注明出处:https://www.cnblogs.com/xuexianqi/p/12797170.html 一:简介 Navicat是一套快速.可靠的数据库管理工具 ...