Реакции-маршрутизатор "Не удается прочитать свойство 'push' из неопределенного"

Question

Я совершенно новый, чтобы реагировать и реагировать маршрутизатор.

Проблема с реакцией заключается в том, что на некоторых страницах моего приложения реактив-маршрутизатор работает, а некоторые выдают ошибку вроде этого: "Невозможно прочитать свойство" push "из неопределенного".

я использую реагировать 0.14.1

Мой код маршрутизации выглядит так:

render(
<Router history={hashHistory}>
  <Route path="/" component={Loginpanel}/>
  <Route path="Index" component={Index}/>
  <Route path="Form" component={Form} />
  <Route path="Checkindex" component={Index}/>

  <Route path="Signup" component={Signup}/>
  <Route path="Admin" component={Admin}/>
  <Route path="AdminEditDetails" component={AdminEditDetails}/>
  <Route path="AdminDetails" component={AdminDetails}/>


</Router>,
document.getElementById('js-main'));

Мой компонент теперь такой:

class  App extends React.Component {

  constructor(props) {
    super(props);
    this.state= {      
      comments: AppStore.getAll();
    };
  }

  componentWillMount() {  
    var length = this.state.comments.length;
    var firstnumber = length - 4;

    if(length == 0){
      console.log("here comes");
      this.props.router.push('/');
    }
    else{
      console.log('work normally');
    }
  }

}

Кто-нибудь может мне с этим помочь? Благодарю.

Answer 1

Ваше приложение не имеет экземпляра маршрутизатора в своих реквизитах, который дает вам Cannot read property 'push' of undefined,

Я предполагаю, что вы импортируете с помощью Router, чтобы получить экземпляр Маршрутизатора, поэтому вам нужно будет обернуть компонент в него, если вы все еще хотите использовать это... (пример здесь, но не предлагается)

Вместо этого лучшим подходом к программной навигации является использование

import { hashHistory } from 'react-router;' ... hashHistory.push('/'); в вашем componentWillMount событие жизненного цикла.

Документы здесь

Надеюсь это поможет!

Answer 2

С помощью hashHistory прямо из react-router Это, конечно, вариант, но он делает юнит-тестирование немного более болезненным. История браузеров, как правило, не будет доступна в контекстных тестах, и проще смоделировать реквизит, чем глобальный API.

Рассмотрите возможность использования withRouter компонент высшего порядка, который react-router предоставить (так как v2.4.0).

import { withRouter } from 'react-router';

class App extends Component {

    (...)

}

export default withRouter(App);

Ваш App класс получатель router с помощью реквизита, и вы можете безопасно сделать this.props.router.push('/');,

Answer 3

Если вы используете частичный компонент и называете его как <Header /> тогда вы должны заменить его на <Header {...this.props} />

Answer 4

Вы можете попробовать приведенный ниже код посмотреть, если ваш router props работает или нет

componentWillMount() {

var length = this.state.comments.length;
var firstnumber = length - 4;
if(length == 0){
    console.log("here comes");
  if(this.props.router !== undefined) {
    this.props.router.push('/');
  } else {
    console.log(this.props.router);
  }
}
else{
    console.log('work normally');
}
}

также вы можете посетить их документацию, чтобы получить дополнительную информацию по ссылке ниже https://github.com/reactjs/react-router/blob/master/docs/guides/NavigatingOutsideOfComponents.md

Answer 5

Вы используете hashHistory. Следующий код должен работать.

import { hashHistory } from 'react-router';
hashHistory.push('/');

Корневой маршрут также должен быть определен.

<Route path="/" component={App}>

Answer 6

импортировать {withRouter} из "дом-маршрутизатора-реакции";this.props.history.push("/ профиль");

// В конце вашего класса вы также экспортируете

экспорт по умолчанию withRouter (имя компонента класса);

Answer 7

Добавьте две строчки.

import { withRouter } from "react-router-dom";
this.props.history.push("/welcomePage");