Multiple Param with React Router

Question

I have two components one is AddList component and second is DetailList compnent. What i am doing is there is a list of AddList component and button in every li . Whenever the user click on any button the respective id and name of that particualar LI is sent to DetailList component so that user can read more on that particular product. I am using react roouter and when i pass one param in the route every thing works i fine. I can console.log the respected Id <Route exact path="/details/:id" component={DetailOffAdd} />. But when i pass second param in route <Route exact path="/details/:id/:name" component={DetailOffAdd} /> my component did not mount and also it does not shows any error. It also do not console the id and name i am priting in DetailList component.

Here is my AddList

export default class Addlist extends Component { constructor(props) { super(props) this.state = { posts : [] } }

passToDetailList(id,name) {
     this.props.history.push('/details/'+id+name)
}
    render() {
      const { posts } = this.state;
        return (
            <div className="container" id="listOfAdd">

            <ul className="addUl">
          {
            posts.map(post => {
              return (
              <li key={post.id}>
                <button onClick={() => this.passToDetailList(post.id, post.add_title)}>VIEW</button>

                </li> 
              );
            })}


           </ul>
         </div>

**And the DetailList Component**

    export default class DetailOffAdd extends Component {
    componentDidMount(){
        console.log(this.props.match.params.id) 
      }
    render() {
        return (
            <Fragment>
              Some code 
            </Fragment>
        )
    }
}

Dlucidone · Accepted Answer · 2020-05-24 07:58:41Z

3

You can use a single slug in the router path to send much more details -

<Route exact path="/details/:id" component={DetailOffAdd} />

let dataObj  = {
       id:1,
       name:"someProduct"
    }
let stringifyData = JSON.stringify(dataObj);

To pass the data -

passToDetailList(id,name) {
  this.props.history.push('/details/'+stringifyData)
}

To Get the data in details file -

let data  = JSON.parse(this.props.match.params.id);
console.log(data) // here is your full data

answered May 24, 2020 at 7:58

Dlucidone

1,1019 silver badges24 bronze badges

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

Comments

nir shabi · Accepted Answer · 2020-05-24 07:54:31Z

0

I think you are missing a '/', try changing your passToDetailList to this:

this.props.history.push(`/details/${id}/${name}`)

answered May 24, 2020 at 7:54

nir shabi

3671 silver badge15 bronze badges

1 Comment

Ritik Singh Over a year ago

I still get a blank page and nothing prints in the console. But the url is this http://localhost:3000/details/2/SECONDADD

Collectives™ on Stack Overflow

Multiple Param with React Router

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related