Question

我有两页。第一个是主页，并具有一个搜索栏。第二个是列表页面，显示已搜索的项目。

<BrowserRouter>
  <div>
    <ScrollToTop>
      <Route exact path="/" component={Home}/>
      <Route path="/tours/" component={Items}/>
    </ScrollToTop>
  </div>
</BrowserRouter>

在Items.js中，我还有另一个搜索菜单组件。

<SearchOverlayMenu/>

在SearchOverlayMenu中，我有一个名为SearchOverlayMenuForm的简单表单组件，像这样

<div className="text-right">
  <button onClick={this.handleFormSubmit}>
    <i className="fa fa-search"></i>
  </button>
  <input id="query" className="bfont text-right" name="q" type="search"/>
</div>

我的问题是，当我在查询输入中键入关键字并按底部提交时，我无法使用NavLink，也无法访问this.history.push(...);

这是我在SearchOverlayMenuForm组件中的“ handleformsubmit”函数：

handleFormSubmit() {
    let query = document.getElementById('query').value;
    console.log(query);
    let newurl = '/tours/?q=' + query;
    this.history.push(newurl);
}

如何将用户重定向到目标URL？

不使用NavLink更改反应路线

0 个答案: