Passing data using state in Link tag in React router

Question

I don't know where I'm wrong. I want to pass that parameter as a state to Link tag and get that in another component.

import React from 'react'
import {Link} from "react-router-dom";

export default class CategoryList extends React.Component{


    render(){
        return(
            <tr>
                <td>
                    <Link to={{pathname:"/Topics/" + this.props.row.Occupation+"/"+this.props.row.objectId +'/id'+'/'+this.props.userName, state:{description:this.props.row.Description}}}>
                        {this.props.row.Occupation}
                    </Link>
                </td>
                <td>{this.props.row.Description}</td>
            </tr>
        )
    }
} 

index.js

<Route path="/Topics/:Occupation/:objectId/:id/:userName" component={Main} />

I want to pass it here and access the state given in Link tag. So your help will be great.

Answer 1

After you pass data to the state object in the Link, you can access this data in the routed component(In your case it is the Main component), like this:

props.location.state

Answer 2

You need not pass any extra values to the route. You can achieve what you desire by providing extra objects to the link object.

Something on the lines of -

 <Link to={{pathname:"/Topics/", customObject: customValue}}>

and then you can access it from this.props.location.customObject