Dynamic routing with react

Question

I wonder how can I pass clicked item id to route path in React?

Here is my parent component

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>
    );
  }
}

I have a list element when I click to some of li element I get the id of this element. So far, everything is ok.

I wonder how and where I can pass the childComponent this item id like path parameter dynamically.

My id in this.state.data.id, and I want to create and pass this id to route of component

url will be like: details/id

So on click to li element route will go to child component and child component will have id of clicked item.

I'm using react-router

my route paths in my app.js:

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

tried Link?

Sharan Arumugam
– Sharan Arumugam

2019-05-19 17:33:29 +00:00
Commented May 19, 2019 at 17:33 — Sharan Arumugam
– Sharan Arumugam, Commented May 19, 2019 at 17:33

sarvon ks · Accepted Answer · 2019-05-15 11:13:31Z

2

You can use url params. kindly check below 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>})

answered May 15, 2019 at 11:13

sarvon ks

6163 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user3348410 Over a year ago

I'll try but i'm confused. where i will link to my component? in my click function? where click working on list element click

sarvon ks Over a year ago

On li click <li onClick={e=>this.context.router.transitionTo('/details/'+id)}> Home</li> or <li> <Link to={'/details/'+id}>Home</Link></li>

user3348410 Over a year ago

i'm getting TypeError: Cannot read property 'transitionTo' of undefined when i try to add this in my click function : onClick: (e, handleOriginal) => { this.context.router.transitionTo('/details/'+id) } i also don't understand where i will put it ? var DynamicComp = ({match})=>({<div>{match.params.id}</div>})

user3348410 Over a year ago

I can't. i need to be done it in onclick function only.

sarvon ks Over a year ago

try onClick={() => history.push('/details/'+id)}

|

Collectives™ on Stack Overflow

Dynamic routing with react

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related