使用 React 路由器中 Link 标签中的状态传递数据

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

索引.js

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

我想在这里传递它并访问 Link 标签中给出的状态。所以你的帮助会很大。

Answer 1

将数据传递到链接中的状态对象后，您可以在路由组件中访问此数据（在您的情况下它是主组件），如下所示：

props.location.state

Answer 2

您无需向路线传递任何额外的值。您可以通过向链接对象提供额外的对象来实现您想要的目的。

类似的东西——

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

然后你可以从this.props.location.customObject