如何将道具传递给另一个组件 <Link> 在React Router中

Question

我正在使用一个数组来显示一组搜索结果，并且在单击一个项目时，我希望将该项目作为道具而不是作为参数传递。

这是我的代码：

{ this.props.results.map((result) => {              //Fetching Each Element
                return (
                    <li key={ result._source.file_name }>
                        <Link to={{pathname: '/photo/' + result._source.file_name + '/' + result._source.keywords, state: { modal: true }}}>
                            <img src={'/photos/' + result._source.file_name} className="image grow-shadow" alt="Search Result" />
                        </Link>
                    </li>
                ) }) }  

我想通过key={result._source.keywords}作为道具，而不是像

<Route path='/photo/:id/:keyw' component={Single} />

这会使URL看起来很丑。

我该如何实现？

Answer 1

链接的结构如下：

<Link to={{pathname: '/photo/:id', state: {keyw: result._source.keywords}}></Link>

在组件中，您可以按以下方式访问状态：

this.props.location.state.keyw

通过链接本身传递状态使用HTML5历史记录状态对象，该对象应在刷新之间保持不变。