2016-12-03 17 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')); 

私は交換するための呼び出しは、別の変更イベントとrouteChangeに別の呼び出しをトリガーと思う

Uncaught RangeError: Maximum call stack size exceeded 

答えて

1

を取得し、ナビゲーションをクリックします。だからあなたのスタックサイズを超えてしまうのです。

あなたがすでに在宅しているかどうかを確認してから、replaceを呼び出すことができます。このような何か:

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

私はフォーカス取得時とはいえ、私のプロジェクトでは、上記と同様の何かをするが、私はそれは同様のonChangeで動作するはずだと思います。

+0

ありがとう、私が欠けているのは条件です。 – BonTheBeerman

+0

あなたはようこそ!できる場合はこれを答えとしてマークしてください:) – Mustafa

関連する問題