0

Всем привет! У меня есть компонент с рутами:

  1. App:
return (
  <Router history={history}>
    <Switch>
      <Route path="/offers/:id"
        render={(props) => {
          const offer = findActiveOffer(offers, props.match.params.id);
          
            return (
              <DetailedOffer
                {...props.match.params}
                offer = {findActiveOffer(offers, props.match.params.id)}
              />);
            }}
            />;
      <Route
        render={() => {
          return (
            <div>Not found</div>
          );
        }}
      />
    </Switch>
  </Router>
  );
  1. Компонент, который имеет линк на страницы:
<Link to={`/offers/${id}`}>{name}</Link>

При клике на линк, адрес в адресной строке меняется на нужный (например /offers/1), но компонент DetailedOffer почему-то не отрисовывается, а отображается Not found. В чем может быть причина и что я делаю не так?

1 ответ 1

0

Для начала проверьте, работает ли такой код. Чтобы получить в DetailedOffer match.params.id оберните компоненту App в widthRouter Пример: export default withRouter(App) В компоненте DetailedOffer так же оборачиваем все в withRouter export default withRouter(DetailedOffer)

само собой импортируем withRouter через import { withRouter } from 'react-router-dom'

В компоненте DetailedOffer в props уже будет нужный id. Достать его можно так props.match.params.id

<Router>
    <Switch>
      <Route path={`/offers/:id`} render={() => <DetailedOffer/>} />
      <Route path='*' exact={ true } render={() => <div>Not found</div> } />
    </Switch>
 </Router>

Остальной Ваш код мне не понятен, но попробуйте начать с этого кода, потом если что дополните его сами

1
  • Спасибо за ответ. Желательно решить задачу без использования withRouter, однако даже с ним к сожалению не заработало
    – Zukhra
    23 ноя 2020 в 11:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.