2016-12-03 7 views
0

반응 라우터에서 onChange를 올바르게 구현하는 방법을 파악하는 데 어려움을 겪고 있습니다. 내가 할일을 바꾸고 싶으면 집으로 리디렉션하고 싶습니다. 이 코드를 다음 탐색을 클릭하면반응 라우터 OnChange 리디렉션

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import Home from './Home'; 
import Post_Form from './Post_Form'; 

import * as Firebase from 'firebase'; 
import Config from './utils/config.js'; 
import Auth from './utils/auth.js'; 

import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'; 

class Root extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     }; 
    } 

    routeChange(nextPathname, nextState, replace, cb) { 
     replace({ 
     pathname: '/home', 
     state: {nextPathname: nextState.location.pathname} 
     }); 
     cb(); 
    } 

    render() { 
     return (
      <Router history = {browserHistory}> 
       <Route path = "/" component = {App} onChange={this.routeChange.bind(this)}> 
       <IndexRoute component = {Home} /> 
       <Route path = "home" component = {Home} /> 
       <Route path ="post-form" component={Post_Form} /> 
       <Route path="*" component={Home}/> 
       </Route> 
      </Router> 
     ) 
    } 
} 


ReactDOM.render(<Root />, document.getElementById('root')); 

나는

Uncaught RangeError: Maximum call stack size exceeded 

답변

1

를 얻을 나는 전화가 다른 변경 이벤트 및 routeChange 다른 호출을 트리거한다 대체 생각합니다. 그래서 스택 크기가 초과됩니다.

교체를하기 전에 이미 집에 있는지 확인할 수 있습니다. 이런 식으로 뭔가 :

if(nextState.location.pathname != '/home'){ 
     replace({ 
    pathname: '/home', 
    state: {nextPathname: nextState.location.pathname} 
    }); 
    } 

내가 onEnter이기는하지만, 내 프로젝트에 위와 비슷한 할,하지만 난 그것뿐만 아니라 onChange가 작동한다고 생각합니다.

+0

정말 고마워요, 제가 놓친 것은 조건입니다. – BonTheBeerman

+0

당신을 환영합니다! 당신이 할 수있는 경우 이것을 답변으로 표시하십시오 :) – Mustafa