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

这会让网址看起来很难看。

我如何实现这一目标？

Answer 1

链接的结构如下：

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

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

this.props.location.state.keyw

通过链接本身传递状态使用HTML5历史状态对象，该对象应该在刷新时保留。

如何使用React Router中的<link />将道具传递给另一个组件

1 个答案: