Question

我正在尝试在我的网址中添加查询参数，但遇到了问题。对于视觉效果，我将Link对象放在onSubmit中，但我知道这是不允许的。

<form onSubmit={<Link to={{ pathname: '/me', query: { showAge: true } }}/>}>
 .....
</form>

Answer 1

使用browserHistory/hashHistoryWrite.push()，进入特定路线，onSubmit来电。将所有值放在要传递的查询中，如下所示：

onSubmit={()=>hashHistory.push({
                 pathname: '/me',
                 query: {a: "a", b: "b", "c": c}
              })
};

或

onSubmit={()=>browserHistory.push({
                 pathname: '/me',
                 query: {a: "a", b: "b", "c": c}
              })
};

Answer 2

我通过以下方法解决了该问题：

let clientId = 2;

this.props.history.push({
    pathname: '/client',
    search: "?" + new URLSearchParams({clientId: clientId}).toString()
})

或

this.props.history.push('/client?clientId=1')

我将上面的代码放入一个函数中，并将其绑定到构造函数中，因此您可以访问props和props.history：

constructor(props){
    super(props)
    this.onSubmitClick = this.onSubmitClick.bind(this)
}

onSubmitClick(){
    this.props.history.push('/client?clientId=1')
}

和

<form onSubmit={this.onSubmitClick}>

</form>

您可能还需要将组件包装在withRouter装饰器中，例如。 export default withRouter(Component);

在链路react-router中添加查询参数

2 个答案: