带有反应的动态路由

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（如路径参数）。

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

的路由

url 会像：details/id

所以点击 li 元素路由将转到子组件，子组件将具有被点击项目的 ID。

我正在使用 react-router

我的 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>})

带有反应的动态路由

Dynamic routing with react

javascript

reactjs

react-router-v4