在 onClick 函数中传递反应路由器路径答案

【问题标题】：Pass react router path in onClick function在 onClick 函数中传递反应路由器路径
【发布时间】：2017-02-06 18:13:12
【问题描述】：

我有一个带有以下表单提交按钮的 React 表单：

<Link 
    className="btn btn-secondary btn-width-200 search-submit" 
    to={{pathname: '/booking/search', query: this.state.filters}}>
     Search

</Link>

在上面的link 中，我想在按钮单击时调用函数handleSubmit(evt)。

handleSubmit(evt) {
    evt.preventDefault();
    this.setState({form_submitted: true});
}

<Link className="btn btn-secondary btn-width-200 search-submit" to={{pathname: '/booking/search', query: this.state.filters}} onClick={this.handleSubmit.bind(this)}>Search</Link>

但以下忽略了to={{pathname: '/booking/search', query: this.state.filters}}，只考虑了handleSubmit函数

有没有办法将to={{pathname: '/booking/search', query: this.state.filters}} 添加到handleSubmit 函数中？或者有没有办法解决这个问题？

【问题讨论】：

标签： javascript html reactjs url-routing

【解决方案1】：

这个??：

import {Link} from 'react-router';

handleSubmit(evt) {
    evt.preventDefault();
    this.setState({form_submitted: true});
}

<Link 
    className="btn btn-secondary btn-width-200 search-submit" 
    to={{pathname: '/booking/search', query: this.state.filters}}>
     Search

</Link>

可以替换为??：

import {browserHistory} from 'react-router';

handleSubmit(evt) {
    evt.preventDefault();
    this.setState({form_submitted: true});
    return this.redirect('/booking/search', this.state.filters);

}

redirect(to, query) {
   browserHistory.push({pathname: to, query})

}

<a
    className="btn btn-secondary btn-width-200 search-submit" 
   onClick={this.handleSubmit} >
     Search

</a>

【讨论】：

【解决方案2】：

您需要了解的是，如何使用react-router API 实现路由。基本上你可以在两个 API 上配置它，browserHistory 和 hashHistory。 (link)

因此，换句话说，通过调用browserHistory.push('/booking/search') 或hashHistory.push('/booking/search')，您应该能够在路线之间导航。

还有可用的 redux 版本，以防万一你想通过一些动作调度来管理你的导航（尽管这不是必需的）。 Link

欲了解更多信息：Programmatically navigate using react router

【讨论】：

【解决方案3】：

您可以在外部函数中使用推送路由器方法，而不是使用Link。例如：

redirectFunction() {
 this.handleSubmit()
 router.push({
  to: '/booking/search',
  query: this.state.filters
 })
}

render () {
  <div 
   className="btn btn-secondary btn-width-200 search-submit" 
   onClick={this.redirectFunction.bind(this)}>
     Search 
  </div>
}

【讨论】：