Перейдите на другую страницу с помощью панели поиска материалов. - PullRequest
Новая
       65

Перейдите на другую страницу с помощью панели поиска материалов.

0 голосов
/ 30 апреля 2019

Я использую панель поиска материалов в заголовке моего приложения и пытаюсь перейти на страницу '/ search' на localhost onRequestSearch.Сам код панели поиска прост: 

 <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).У меня есть маршрут, настроенный для страницы "/ search" в моем главном приложении.Я также попытался использовать Redirect: 

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
 }
}

Это просто приводит к тому, что вся страница становится пустой, когда я что-то печатаю в строке поиска и нажимаю ввод,Адрес в браузере также НЕ меняется на «/ search».Не уверен, что я делаю не так.Просто попробуйте перейти на другую страницу, когда пользователь вводит текст в строку поиска и нажимает клавишу ввода.Любые предложения будут с благодарностью.Заранее спасибо!

1 Ответ

1 голос
/ 30 апреля 2019

Попробуйте добавить с помощью роутера HoC, а затем повторите попытку с помощью this.props.history.push () 

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