Реактивный маршрутизатор «Невозможно прочитать свойство« 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

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

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

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

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

Документов являются here

Надеется, что это помогает!

Answer 2

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

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

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

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

Answer 3

вы можете попробовать следующий код увидеть, если ваш 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'); 
} 
} 

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

Answer 4

Использование 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('/');.