Question

我在'/'路线上有一个索引组件，在该组件中我有一个Link。当我单击链接时，我会将其重新路由到/search，但是如何通过该链接传递一些参数并将它们放在/search路径上呈现的组件中。

这是我迄今为止所尝试过的：

索引组件内的链接：

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

与/search

匹配的路线

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

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>

Answer 2

React-router注入location属性，该属性是一个包含search属性的对象，用于存储URL的查询字符串部分，请尝试使用：

this.props.location.search

Answer 3

如果有人遇到同样的问题，请将query替换为search。

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

会成为这个

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

用Link反应传递params

3 个答案: