Получение неопределенных компонентов в React Router v4

Только что обновился до react-router-dom 4.0.0. Все мои компоненты либо обычные classes, либо толстые стрелки. Все они экспортируются с помощью export default ThatComponent. Тем не менее, я получаю это:

Неперехваченная ошибка: недопустимый тип элемента: ожидалась строка (для встроенных компонентов) или класс/функция (для составных компонентов) но получено: не определено. Вероятно, вы забыли экспортировать компонент из файла, в котором он определен. Проверьте метод рендеринга Router.

// minimal showcase
import { BrowserRouter, Match, Miss } from 'react-router';

const Router = () => (
  <BrowserRouter>
    <div>
      {/* both Match and Miss components below cause an error */}
      <Match exactly pattern="/login" component={Login} /> 
      <Match exactly pattern="/frontpage" component={Frontpage} />
      <Match exactly pattern="/logout" render={() => (<div>logout</div>)} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
);

Почему компоненты <Match> считают, что другие компоненты не определены?


reactjs javascript react-router-dom react-router
person Michael Johansen    schedule 15.03.2017    source источник
comment
Можете ли вы поделиться, где вы нашли компонент Match?   -  person Nevin Madhukar K    schedule 15.03.2017
comment
Взято отсюда: frontend.turing.io/lessons/react-router-4 .html   -  person Michael Johansen    schedule 16.03.2017

Ответы (2)


arrow_upward
9
arrow_downward

В финальной версии react-router нет ни Match, ни Miss. Вам просто нужно использовать Route. Кроме того, вам необходимо установить и импортировать пакет react-router-dom для использования BrowserRouter (см. Документацию по React Router).

Чтобы ваш пример работал с минимальными изменениями, вам нужно сделать следующее:

// minimal showcase
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route exact path="/login" component={Login} /> 
            <Route exact path="/frontpage" component={Frontpage} />
            <Route exact path="/logout" render={() => (<div>logout</div>)} />
            <Route component={NoMatch} />
        </Switch>
    </BrowserRouter>
);

Ознакомьтесь с NoMatchExample в документации React Router, чтобы узнать, как и когда использовать Switch.

person Michał Płachta    schedule 21.03.2017

arrow_upward
1
arrow_downward

Проверьте источник реакции-маршрутизатора здесь: https://unpkg.com/[email protected]/index.js（также https://unpkg.com/[email protected]/index.js）, под ним нет Match. Match может принадлежать другому пакету.

person Y.Peng    schedule 15.03.2017
comment
Хм… вот откуда я это взял: frontend.turing.io/lessons/ react-router-4.html Возможно, это была часть альфа-версии RR4, которая не вошла в текущую сборку. - person Michael Johansen; 16.03.2017