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 替换为 search，您可以访问 query，如:

this.props.location.query

给定:

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