V
V
Vladimir2017-06-10 20:36:03
JavaScript
Vladimir, 2017-06-10 20:36:03

How to properly display data from JSON in React-router / Redux, on a new page, corresponding to the current id?

This is the root file, actually how to set up dynamic routing?
For a table, so that it is not a Link or a Button, but an onClick event for the entire row of the table .
Refurbished everything. Docks, forums.... found nothing intelligible.

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

Answer the question

In order to leave comments, you need to log in

1 answer(s)
M
Maxim, 2017-06-11
@maxfarseer

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>

ps instead of id, you can use data-* attributes, and get them via e.currentTarget.dataset.*

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question