javascript - 带反应的动态路由

Question

我想知道如何将点击的项目 ID 传递给 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 这个项目 id，如路径参数。

我的 id this.state.data.id，我想创建这个 id 并将其传递给组件的路由

网址将类似于：details/id

因此，单击到 li 元素路由将转到子组件，子组件将具有被单击项目的 id。

我正在使用反应路由器

我的 app.js 中的路由路径：

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

标签： javascriptreactjsreact-router-v4

Answer 1

您可以使用 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>})