使用 Material SearchBar 导航到另一个页面答案

【问题标题】：Navigate to another page using Material SearchBar使用 Material SearchBar 导航到另一个页面
【发布时间】：2019-09-18 15:04:46
【问题描述】：

我在我的应用程序的标题中使用 Material SearchBar，并尝试导航到 localhost onRequestSearch 上的页面“/search”。搜索栏本身的代码很简单：

 <SearchBar
   onChange = {() => console.log('onChange')}
   onRequestSearch = {() => this.setRedirect()}
   style = {{ margin: '0 auto', maxWidth:800}}/>

现在，我尝试以多种方式实现 setRedirect 函数，但都没有成功。首先，我只是尝试过：

setRedirect() {
  this.props.history.push('/search');
}

但这给出了一个错误 Undefined is not an object (evalating this.props.history)。我确实在我的主应用程序中为“/search”页面设置了一个路由。我也尝试过使用重定向：

constructor(props) {
  super(props);
  this.state = {
     redirect = false
    }
}

setRedirect()  {
  this.setState({
    redirect: true  
  }
}

而在渲染方法中：

render() {
  if(this.state.redirect)  {
    return (
        <Router>
          <div>
            <Redirect push to="/search"/>
            <Route path="/search" exact strict component={Search}/>
          </div>
        </Router>
    );
   }
  else {
   // return other stuff
 }
}

当我在搜索栏中输入内容并按 Enter 键时，这只会导致整个页面变为空白。浏览器中的地址也不会更改为“/search”。不知道我做错了什么。一旦用户在搜索栏中输入文本并点击回车，只需尝试导航到另一个页面。任何建议将不胜感激。先感谢您！

【问题讨论】：

标签： reactjs react-router material-design navigateurl

【解决方案1】：

尝试添加 withRouter HoC，然后使用 this.props.history.push() 重试

import {  withRouter } from 'react-router-dom'
...
export default withRouter(MyComponent);

【讨论】：

赢家！非常感谢您，先生！我将在 3 分钟内（允许的最早时间）接受您的答复。再次感谢您！
您也可以避免 HoC 只从包含此道具的最新组件中传递历史道具。
@JoãoVictor 我正在尝试做同样的事情。你知道我如何通过 onRequestSearch 将输入值传递给搜索组件吗？