javascript - 使用 Link React 传递参数

Question

我在 '/' 路由上有一个索引组件，并且在该组件中我有一个 Link。当我单击该链接时，我确实会重新路由到 /search，但是如何使用该链接传递一些参数并将它们放入在 /search 路由上呈现的组件内。

这是我迄今为止尝试过的:

索引组件内的链接:

<Link to={{ pathname: '/search', query: this.state.status  }}>
                    Search
                </Link>

匹配/search的路由

 <Route exact path="/search" component={Search}/>

搜索组件

class Search extends React.Component {
    constructor(props){
        super(props);
    }
    render() {
        console.log("Props are: ");
        console.log(this.props);
        return (
            <div className="col-xs-12 text-center tweet-background">
                <h1>{this.props.query}</h1>
            </div>
        )
    }
}

但不幸的是 props 参数只有:

Object {match: Object, location: Object, history: Object, staticContext: undefined}

我是否在链接内传递了我的参数？如果没有，我怎样才能实现这一目标？

为了让您了解我想要实现的目标，请考虑一下 Google 搜索。您单击Search，它会将您带到另一个带有参数的组件。

编辑:

为了简单起见，因为大多数问题都与索引组件的状态有关，所以我将查询更改为 query: { name: 'ryan' }。

Answer 1

您可以访问 query，而不是将 query 替换为 search，如下所示:

this.props.location.query

给定:

<Link to={{ pathname: '/search', query: this.state.status  }}> Search </Link>