一、报警如图：

二、查找路由版本

我使用路由版本是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. WinForm微信扫码登录

    源码还需优化,不喜勿喷. 微信官方文档 : https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat ...

  2. C#递归的简单实例

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  3. spring notes

    ************************ nexus is a tool of warehouse managementfirst nexus search local warehous ,i ...

  4. pandas之时间数据

    1.时间戳Timestamp() 参数可以为各种形式的时间,Timestamp()会将其转换为时间. time1 = pd.Timestamp('2019/7/13') time2 = pd.Time ...

  5. Spring集成CXF发布WebService并在客户端调用

    Spring集成CXF发布WebService 1.导入jar包 因为官方下载的包里面有其他版本的sprring包,全导入会产生版本冲突,所以去掉spring的部分,然后在项目根目录下新建了一个CXF ...

  6. Kubernetes 教程：根据 PID 获取 Pod 名称

    原文链接:https://fuckcloudnative.io/posts/find-kubernetes-pod-info-from-process-id/ 在管理 Kubernetes 集群的过程 ...

  7. 每日一道 LeetCode (2)：整数反转

    题目:整数反转 题目来源:https://leetcode-cn.com/problems/reverse-integer 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示 ...

  8. Python os.rename() 方法

    概述 os.rename() 方法用于命名文件或目录,从 src 到 dst,如果dst是一个存在的目录, 将抛出OSError.高佣联盟 www.cgewang.com 语法 rename()方法语 ...

  9. PHP rsort() 函数

    实例 对数组 $cars 中的元素按字母进行降序排序: <?php$cars=array("Volvo","BMW","Toyota" ...

  10. luogu P6097 子集卷积 FST FWT

    LINK:子集卷积 学了1h多 终于看懂是怎么回事了(题解写的不太清楚 翻了好几篇博客才懂 一个需要用到的性质 二进制位为1个数是i的二进制数s 任意两个没有子集关系.挺显然. 而FST就是利用这个性 ...