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 Dlucidone · Accepted Answer · 2020-05-24T07:58:41

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

Multiple Param with React Router

2 Answers