Предупреждение: Ошибка типа проп: неверный компонент `типа` объекта` объект` передан в `Route`, ожидается` функция` Ошибка при использовании response-router-dom

Question

Я пытаюсь использовать response-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

Предупреждение: сбойный тип пропеллера: недопустимый компонент пропуска типового объекта, предоставленный в Route, ожидаемая функция

переданная опора не является компонентом, но является объектом.Ваш класс должен расширяться React.Component

import React, {Component} from 'react'

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

Answer 2

Скорее всего, вы пытались импортировать ваш компонент с помощью фигурных скобок, даже если это экспорт по умолчанию.

---

ЭКСПОРТ ПО УМОЛЧАНИЮ:

Если вы используете экспортваш компонент с указанным default (экспорт по умолчанию), вам нужно импортировать его без фигурных скобок, как это:

import RandomComponent from '../pathToComponent';

---

NAMED EXPORT:

Но если вы экспортируете свой компонент без указания default (именуемый экспорт), вам необходимо импортировать его с помощью фигурных скобок, например:

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

---

Обратите внимание, что вы можете иметь только один экспорт по умолчанию изодин файл, но столько именованных экспортов, сколько вы хотите из одного файла.