При использовании связки React + MobX требуется какая-то дополнительная настройка реакт-роутера?

Question

[MaximPatrushev]

Изучаю Mobx, решил демо приложение на React + Redux мигрировать на Mobx. Вроде все понятно, но вылезает ошибка

index.js:1437 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (at App.tsx:15)
    in App (at src/index.tsx:23)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.tsx:22)
    in ThemeProvider (at src/index.tsx:21)
    in MobXProvider (at src/index.tsx:20)

Файл App.tsx не трогал, с редаксом все работало, код ниже:

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import NotFound from '../../shared/NotFound/NotFound';
import Layout from '../Layout/Layot';
import Main from '../../pages/Main';
import ExerciseList from '../../pages/ExerciseList';
import AddExercise from '../../pages/AddExercise';


const App = () => {
  return (
    <Layout>
      <Switch>
        <Route path="/" exact component={Main} />
        <Route path="/exercises" exact component={ExerciseList} />
        <Route path="/exercises/add" component={AddExercise} />
        <Route component={NotFound} />
      </Switch>
    </Layout>
  );
};

export default App;

Нагуглить ничего, к сожалению, не смог, буду благодарен за помощь.

Answer 1

[Руслан Герасимов]

Какая версия react-router-dom? Скорее всего обновление поможет.

А так, одно из быстрых решений сделать так:

<Route path="/" exact render={props => <Main {...props} />} />
<Route path="/exercises" exact render={props => <ExerciseList {...props} />} />
 ...

Comments

[MaximPatrushev]

Спасибо, обновил версию с 4.3.1 до 5.0.1, ошибка пропала.