Render в Route (react-router-dom) не рендерит компонент

Question

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

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>
  );

Компонент, который имеет линк на страницы:

<Link to={`/offers/${id}`}>{name}</Link>

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

Answer 1

Для начала проверьте, работает ли такой код. Чтобы получить в 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>

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

БЛОГ НА HUSL

Render в Route (react-router-dom) не рендерит компонент

Ответы (1 шт):