警告：失败的属性类型：为“路由”提供的“对象”类型的“组件”属性无效，使用react路由器dom时应出现“函数”错误

Question

我正在尝试使用react路由器dom。当我将组件导出为

class RandomComponent { // component code}
export default RandomComponent;

并将其作为路由中的组件使用如下-

<Route path="/" exact component={RandomComponent} />

我在Chrome控制台收到以下警告-

警告：失败的prop类型：无效的prop组件的类型对象提供给路由，预期的函数

但是当我使用

export class RandomComponent{ // component code}

同样一段代码开始工作，有人能解释一下为什么会这样吗？提前感谢。




Answer 1

这似乎是4.4版之前的react router中的一个错误。

在撰写本文时，最新版本是5.2，使用该版本解决了我的问题：

npm install --save react-router@latest

如果您使用的是react router dom，您可能还需要更新它。

请注意，如果您遇到此问题，您的react路由器至少有两个主要版本已过时；而且，可能需要进行大量工作才能使路线在最新版本中工作。小心地跨主要版本边界更新包。

Answer 2

警告：失败的道具类型：无效的道具组件的类型对象提供给路由，预期的功能

传递的道具不是组件，而是对象。您的类应该扩展React。组件

import React, {Component} from 'react'

class RandomComponent extends Component {/*your code*/}

Answer 3

您很可能尝试使用大括号导入组件，即使它是默认导出。

默认导出：

如果您使用指定默认的导出组件（默认导出），您需要导入它而不需要像这样的花括号：

import RandomComponent from '../pathToComponent';

命名导出：

但是，如果导出组件时未指定default（名为export），则需要使用大括号将其导入，如下所示：

import { RandomComponent } from '../pathToComponent';

请注意，从单个文件只能有一个默认导出，但从单个文件可以有任意多个命名导出。