Передача данных с использованием состояния в теге Link в React router

Question

Я не знаю, где я не прав.Я хочу передать этот параметр как состояние в тег Link и получить его в другом компоненте.

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} />

Я хочу передать его здесь и получить доступ к состоянию, указанному в теге Link.Так что ваша помощь будет отличной.

Answer 1

Я знаю, что опаздываю с предложением решения, возможно, у вас есть решение, но мое решение также может работать для других, кто сталкивается с той же проблемой.Я сделал что-то вроде этого

public loadPage(data) {
    browserHistory.push({
        pathname: '/am/activate',
        state: data
    });
}

На другом компоненте вы можете получить доступ к этому значению

this.props.location.state

Answer 2

Согласно документам , вы можете сделать что-то вроде этого

<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}> Hello </Link>

И по новому пути вы можете получить это имя с помощью реквизита.

Answer 3

Вам не нужно передавать какие-либо дополнительные значения в маршрут.Вы можете достичь того, что вы хотите, предоставляя дополнительные объекты для объекта ссылки.

Что-то в строках -

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

, и затем вы можете получить к нему доступ из this.props.location.customObject

Answer 4

После передачи данных в объект состояния в ссылке вы можете получить доступ к этим данным в маршрутизируемом компоненте (в вашем случае это основной компонент), например:

props.location.state