Как правильно вывести данные из JSON в React-router/Redux, на новой стр., соответствующие текущему id?

Question

[Владимир]

Это корневой файл, собственно как настроить динамический роутинг?
Для таблицы, чтобы это был не Link и не Button, а событие onClick для всей строки таблицы.
Перешерстил все. Доки, форумы.... ничего внятного не нашел.

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route name="app" path="/" component={App}>
        <IndexRoute name="app:home" component={Home} onEnter={requireAuth} />
        <Route name="app:infos" path="information" component={ListPage} onEnter={requireAuth} />
        <Route name="app:info" path="information/:id" component={InfoPage} onEnter={requireAuth} />
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

Comments

[Максим]

vnam92, из вопроса вообще, не понятно что вы хотите сделать. Попробуйте разъяснить подробнее.

[Владимир]

Максим: у меня есть контейнер 1 (ListPage - таблица с данными) и есть контейнер 2(InfoPage с развернутой информацией), на который ссылается 1ый через событие onClick по строке в своей таблице:

<tr onClick={showInfoPage} >
     <td key={infos.id}>{infos.id}</td>
     <td key={infos.about}>{infos.about}</td>
</tr>

Как мне правильно использовать infos.id, чтобы по клику вызывался контейнер 2 соответствующий текущему(param) id информации. Другими словами как правильно передать передать id в

<Route name="app:info" path="information/:id" component={InfoPage} onEnter={requireAuth} />

p.s. обернуть весь tr в Link неверный способ.
Спасибо!

Answer 1

[Максим]

showInfoPage(e) {
  const id = e.currentTarget.id
  // далее нужно вызвать сам переход
  // я делаю это через push из react-router-redux ( import { push } from 'react-router-redux' )
  // можно прокинуть через dispatch
  dispatch(push('/information/'+id))

  //конечно, у вас dispatch скорее всего будет прокинут из props, поэтому финальный вариант
  this.props.dispatch(push('/information/'+id))  
}

<tr onClick={showInfoPage} id={infos.id}>
     <td key={infos.id}>{infos.id}</td>
     <td key={infos.about}>{infos.about}</td>
</tr>

p.s. вместо id, можете использовать data-* атрибуты, и доставать их через e.currentTarget.dataset.*

Comments

[Владимир]

Спасибо, понял вашу идею, но хотелось бы уточить 1 момент. Сейчас у меня сам метод showInfoPage находится в контейнере(1) а <tr onClick={showInfoPage} id={infos.id}> в контейнере(2) и код не хочет работать выдавая:

Warning: [react-router] You cannot change ; it will be ignored

и

Warning: [react-router] You cannot change ; it will be ignored

. Не подскажите почему роутер всё блочит?

[Максим]

Владимир: никогда не видал такой ошибки, роутер 3й или 4й версии? Мой пример был для 3й. Ну и плюсом, как это понять: showInfoPage в контейнере 1, а вызываете вы его в контейнере 2 как? импортом? или из пропсов или как?

[Владимир]

Максим: опечатался, вызов происходит в чайлде, т.е. я просто прокидываю вызов данной функции через пропс, предварительно забиндив, ее в конструкторе. Так же если делать по вашему рецепту, для пущего эффекта реакт ругается и на диспатч, говоря что он не является функцией.. Роутер 3 версии.

[Максим]

Владимир: чтобы dispatch являлся функцией, нужно его сначала прокинуть (для пущего эффекта)!

const mapDispatchToProps = (dispatch) => ({
  dispatch, // !!!!
  getLatestSnapshots: (params) => dispatch(getLatestSnapshots(params)), // какие-то другие Action Creator'ы
  openTryProPopup: () => dispatch(openTryProPopup()), // какие-то другие Action Creator'ы
})
... в контейнере выдергиваете dispatch из this.props и прокидываете его чайлду
<Child dispatch={this.props.dispatch} />