一、报警如图：

二、查找路由版本

我使用路由版本是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. Pull后产生多余的log（Merge branch 'master' of ...）

    第一步: git reset --hard 73d0d18425ae55195068d39b3304303ac43b521a 第二步: git push -f origin feature/PAC_1 ...

  2. Python虚拟环境（virtualenv）

    python虚拟环境 虚拟环境:一个独立的可以运行的python执行环境,可以创建多个,且相互之间互不影响 使用virtualenv库 pip install virtualenv 用法 # 创建虚拟 ...

  3. 题解 SP2713 【GSS4 - Can you answer these queries IV】

    用计算器算一算,就可以发现\(10^{18}\)的数,被开方\(6\)次后就变为了\(1\). 所以我们可以直接暴力的进行区间修改,若这个数已经到达\(1\),则以后就不再修改(因为\(1\)开方后还 ...

  4. DJANGO-天天生鲜项目从0到1-009-搜索功能实现(django-haystack+whoosh+jieba)

    本项目基于B站UP主‘神奇的老黄’的教学视频‘天天生鲜Django项目’,视频讲的非常好,推荐新手观看学习 https://www.bilibili.com/video/BV1vt41147K8?p= ...

  5. Python网络数据采集PDF高清完整版免费下载|百度云盘

    百度云盘:Python网络数据采集PDF高清完整版免费下载 提取码:1vc5   内容简介 本书采用简洁强大的Python语言,介绍了网络数据采集,并为采集新式网络中的各种数据类型提供了全面的指导.第 ...

  6. hostapd阅读（openwrt）-2

    深入追踪openwrt下的hostapd之后,发现openwrt无线管理机制格外的复杂,几乎所以的触发与回调均离不开ubus,关于ubus这里不作解释,先大概了解其用途即可(出门左转:https:// ...

  7. Redis系列(九)：Redis的事务机制

    提到事务,相信大家都不陌生,事务的ACID四大特性,也是面试时经常问的,不过一般情况下,我们可能想到的是传统关系型数据库的事务,其实,Redis也是提供了事务机制的,本篇博客就来讲解下Redis的事务 ...

  8. feign.FeignException: status 404 reading xxService#xxmethod

    做乐优商城授权中心出错 public interface UserApi { @GetMapping("query") public User queryUser( @Reques ...

  9. Django学习路18_F对象和Q对象

    F 对象: 可以使用模型的 A 属性和 B 属性进行比较 写法: 需要的数据对象 = 数据表(类名).objects.filter(列名__条件=F('列名2')) 需求: 查看男生数量比女生少 的公 ...

  10. Django学习路12_objects 方法(all,filter,exclude,order by,values)

    Person.objects.all() 获取全部数据 def get_persons(request): persons = Person.objects.all() # 获取全部数据 contex ...