Динамическая маршрутизация с реагированием

Question

Интересно, как я могу передать выбранный идентификатор элемента в маршрутный путь в React?

Вот мой родительский компонент

export default class ParentComponent extends Component {
  state = {
    data: null
  };
  render() {
    return (
      <section>
        <Row>
          <ul>
              <li>....<li>
              ....
          <ul>
        </Row>
        <Row>
          <ChildComponent rowData={this.state.data} />
        </Row>
      </section>
    );
  }
}

У меня есть элемент списка, когда я щелкаю по некоторому элементу li, я получаю id этого элемента. Пока все в порядке.

Интересно, как и где я могу передать childComponent этот идентификатор элемента как параметр пути динамически.

Мой идентификатор в this.state.data.id, и я хочу создать и передать этот идентификатор в маршрут компонента

URL будет выглядеть так: details/id

Таким образом, при щелчке по li элемент маршрута перейдет к дочернему компоненту, а дочерний компонент будет иметь идентификатор выбранного элемента.

Я использую реагирующий маршрутизатор

мои маршруты в моем app.js:

<Switch>
    <Route path="/login" /> 
    <Route exact path="/callback" />
    <Route  path="/about" component={About} /> 
</Switch>

Answer 1

Вы можете использовать URL-параметры. пожалуйста, проверьте ниже URL https://reacttraining.com/react-router/web/example/url-params

<Switch>
    <Route path="/login" /> 
    <Route exact path="/callback" />
    <Route  path="/about" component={About} /> 
    <Route  path="/details/:id" component={DynamicComp} />
</Switch>

var DynamicComp = ({match})=>({<div>{match.params.id}</div>})