警告：道具类型失败：提供给“路线”的对象类型无效的道具“组件”，预期的“功能”使用react-router-dom错误

Question

我正在尝试使用 react-router-dom 。当我将组件导出为

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

并将其用作Route中的组件，如下所示-

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

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

警告：道具类型失败：提供给component的类型object的道具Route无效的道具function

但是当我使用

导出组件时

export class RandomComponent{ // component code}

同一段代码开始工作，有人可以解释一下为什么会这样吗？预先感谢。

Answer 1

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

---

默认导出：

如果您使用指定了default的导出组件（默认导出），则需要导入时不使用花括号：

import RandomComponent from '../pathToComponent';

---

命名出口：

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

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

---

请注意，单个文件只能有一个默认导出，但单个文件中可以有任意数量的命名导出。

Answer 2

  

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

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

import React, {Component} from 'react'

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

Answer 3

这似乎是 4.4 版之前的 react-router 中的 bug。

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

npm install --save react-router@latest

如果您正在使用 react-router-dom，您可能还想更新它。

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