Как правильно передавать реквизиты в React Components?

Question

У меня есть массив маршрутов, который передается в RouteComponent

const info = [
  { path: '/restaurants/:id', component: <Restaurant match={{ params: '' }} /> },
  { path: '/restaurants', component: <ListRestaurant match={{ path: '/restaurants' }} /> }
];

Я использую Ax ios для соединения с серверной частью

Ресторанный компонент:

  async componentDidMount() {
    this.getOne();
  }
  getOne() {
    const { match } = this.props;
    Api.getOne('restaurants', match.params.id)

Компонент ресторана:

Когда я вижу консоль, возникает ошибка, подобная этой

Итак, что можно передать как реквизит? Не могу найти решение. Заранее спасибо

Приложение. js

import ...
import info from './components/info/routes';

class App extends Component {
  render() {
    const routeLinks = info.map((e) => (
      <RouteComponent
        path={e.path}
        component={e.component}
        key={e.path}
      />
    ));
    return (
      <Router>
        <Switch>
          {routeLinks}
        </Switch>
      </Router>
    );
  }
}

Компонент маршрута. js

import { Route } from 'react-router-dom';

class RouteComponent extends Component {
  render() {
    const { path, component } = this.props;
    return (
      <Route path={path}>
        {component}
      </Route>
    );
  }
}

RouteComponent.propTypes = {
  path: PropTypes.string.isRequired,
  component: PropTypes.object.isRequired,
};

РЕДАКТИРОВАНИЕ 22/03/2020

Строка с дает следующее: Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: object.

Проверьте метод рендеринга Context.Consumer.

class RouteComponent extends Component {
  render() {
    const { path, component } = this.props;
    return (
      <Route path={path} component={component} />
    );
  }
}

RouteComponent.propTypes = {
  path: PropTypes.any.isRequired,
  component: PropTypes.any.isRequired,
};

Но, как вы видите, я делаю PropTypes 'any «

Answer 1

Хорошо, есть некоторые изменения, которые вам нужно сделать, и их может быть недостаточно Так что дайте мне знать, если не работает в комментариях.

Шаг первый

правильно отправить компонент на маршруты

class RouteComponent extends Component {
  render() {
    const { path, component } = this.props;
    return (
      <Route path={path} component={component}/>
    );
  }
}

Шаг второй

Отправить элемент JSX, а не объект JSX

const info = [
  { path: '/restaurants/:id', component: Restaurant },
  { path: '/restaurants', component: ListRestaurant }
];

Answer 2

Импортируйте RouteProps из response-router-dom и используйте его в качестве интерфейса для реквизитов в routecomponent. js.

Затем, вместо вызова компонента через выражение, вызовите его как компонент, то есть

Например,

function Routecomponent({ component: Component, ...rest }: RouteProps) {
    if (!Component) return null;

    return (
        <Route
            {...rest}
                <Component {...props} />
               />}
    )
}