Question

我在应用程序的标题中使用了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不是对象的错误（评估this.props.history）。我的主应用程序确实为“ /搜索”页面设置了路线。我也尝试使用重定向：

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

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

在render方法中：

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键时，这只会导致整个页面空白。浏览器中的地址也不会更改为“ /搜索”。不知道我在做什么错。用户一旦在搜索栏中输入文字并点击回车，就可以尝试导航到另一个页面。任何建议将不胜感激。先感谢您！

Answer 1

尝试使用Router HoC添加，然后使用this.props.history.push（）再试一次

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

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

1 个答案: