在 onClick 函数中传递 React 路由路径

Question

我有一个具有以下表单提交按钮的 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函数上？还是有办法解决这个问题？

Answer 1

您可以在外部函数中使用推送路由方法，而不是使用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>
}

Answer 2

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

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

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

更多信息：

Answer 3

这个：

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>

在 onClick 函数中传递 React 路由路径

Pass react router path in onClick function

html

javascript

url-routing

reactjs