表单提交上的React路由器重定向

时间:2017-07-19 18:49:41

标签: javascript forms reactjs redirect react-router

我不确定使用React Router v4的最佳方法。基本上,我有一个包含表单的SearchBar组件。当用户提交表单时我想重定向到/search,我可以通过设置状态变量来完成。SearchBar问题在于//search都会呈现/。因此,我可以成功地从/search重定向到/,但当用户导航回/时,状态中的变量不会更新,因此来自{{1}的所有后续搜索不要重定向。

class SearchBar extends React.Component {

  search = (e) => {
    e.preventDefault();
    this.props.isOnSearch();  // sets bool in state based on location.pathname

    // fetch data
  };

  render() {
    const { onSearch } = this.props;  //state variable 
    return (
      <div>
        <form className="book-search" onSubmit={(e) => this.search(e)}>
          <input type="text"/>
          <button type="submit">Search</button>
        </form>
        {
          onSearch && (<Redirect to="/search"/>)
        }
      </div>
    )
  }
}

也许有一种完全不同/更好的方式来做到这一点。似乎不应该这么复杂。请发送帮助。

0 个答案:

没有答案