Как настроить роутинг, чтобы отображалась нужная информация?

Question

[darkDARK]

У меня на странице есть два индекса 1 и 2. При нажатии на 1 перенаправляет на страницу /event/1, при нажатии на 2 перенаправляет на /event/2.
Мне нужно, чтобы на страницах /event/1 и /event/2 отображались name и time которые я туда передам

/event/1

name: Kate
time: 15s

/event/2

name: Mark
time: 23s

Помогите, пожалуйста, доделать! Все, что я сделал на данный момент, ниже
https://codesandbox.io/s/magical-tu-z4it1?file=/sr...

Answer 1

[Robur]

Уберите тег react-native.
передать name и time можно через пропсы, используйте render вместо component, тогда сможете передать туда все что захотите:
https://reacttraining.com/react-router/web/api/Rou...

Comments

[darkDARK]

Туда ведь можно передать только один компонент? Как мне сделать, чтобы для одной страницы отображалось одно, для другой -- другое? Если я в свой код добавлю это, что вы скинули, у меня будут одинаковые страницы.

[Robur]

Туда можно передать все что угодно.
Если вы хотите разные компоненты - сделайте рендеринг по условию, если вы хотите чтобы компонент был один и тот же но в нем разные данные - передавайте в него разные пропсы.

Если вы в принципе хотите на один роут один компонент а на другой роут - другой компонент, то делаете два роута

<Route path="/1" component={Component1}/><Route path="/2" component={Component2}/>

[darkDARK]

Robur, Я хочу один роут. Компонента у меня тоже одна, просто туда надо передавать разные пропсы в зависимости от того, на какой мы странице.
Как написать условие? Можете помочь, пожалуйста? Ничего не выходит

[Robur]

что-то вроде

<Route path="/event/:index" render={(props) => props.match.params.index === '1' ? <Description name='Kate'/> : <Description name='Mark'/>} />

Но я бы вам посоветовал сначала написать код без роутинга который работает так как вы хотите чтобы было на events/1, потом закомментировать и написать чтобы он работал так как вы хотите чтобы было на events/2

потом посмотреть в чем разница и там уже подумать как эту разницу организовать через роутинг