React Router onEnter関数 "Uncaught RangeError：最大呼び出しスタックサイズを超過しました"

Question

子ルートにリダイレクトしたい場合は、設定値を確認しています。いつものように表示するだけではありません。コードは期待どおりにURLを更新しますが、無限ループに入ります。

index.js

import React from 'react' 
import { render } from 'react-dom' 
import { Router, Route, browserHistory, IndexRoute } from 'react-router' 
import App from './modules/App' 
import About from './modules/About' 
import Map from './modules/Map' 
import Maps from './modules/Maps' 
import Home from './modules/Home' 
import { settings } from './appconfig.js'; 

function checkDefaultFloor(){ 
    if (settings.floorUrl){ 
    console.log(settings.floorUrl); 
    browserHistory.push('/maps/'+ settings.floorUrl); 
    } 
} 

render((
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="/maps" component={Maps} onEnter={checkDefaultFloor}> 
     <Route path="/maps/:mapName" component={Map}/> 
     </Route> 
     <Route path="/about" component={About}/> 
    </Route> 
    </Router> 
), document.getElementById('app')) 

Answer 1

あなたがルート/mapscheckDefaultFloor()を入力するたびに/map's子の1つにリダイレクトされ実行されるためには、無限ループに入ります。

リダイレクトにより、onEnter -> checkDefaultFloor()が再度トリガーされ、無限の再帰がトリガーされます。既にリダイレクトされていない場合、あなたがする必要がどのような

は、例えば、<Maps />のcomponentDidMountに機能を移動したり、チェックのいずれかであるあなたがbrowserHistory.push()文は、それがため、無限ループに行くことになっている

hasRedirected = false; 

function checkDefaultFloor(){ 
    if (settings.floorUrl && !hasRedirected) { 
    hasRedirected = true; 
    browserHistory.push('/maps/'+ settings.floorUrl); 
    } 
} 

Answer 2

ルートはあなたのmapルートにネストされています。 replaceの機能とcallbackのような機能を使用する必要があります。

function checkDefaultFloor(nextState, replace, callback){ 
    if (settings.floorUrl){ 
    console.log(settings.floorUrl); 
    replace(`/maps/${settings.floorUrl}`) 
    } 
    callback(); 
} 

Answer 3

私は同様の問題がありました。解決策は、Shubham Khatriが提案したものを実装することでした。しかし、私が最初に逃した重要なポイントは、onEnterコールバックをIndexRouteにアタッチすることでした。私は標準のJavaScriptオブジェクトを使用してルートを定義しています。これは私がする必要があるものです：

{ 
    path: '/', 
    indexRoute: { 
    onEnter: (nextState, replace) => replace('some-route') 
    }, 
    childRoutes: [...] 
} 

OPのJSXコードで同様の問題があったと思います。 （私はこれをテストしていませんが）それはおそらく、このようにされている必要があります。 の

function checkDefaultFloor(nextState, replace, callback){ 
    if (settings.floorUrl){ 
    console.log(settings.floorUrl); 
    replace(`/maps/${settings.floorUrl}`) 
    } 
    callback(); 
} 

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="/maps" component={Maps}> 
     <IndexRoute onEnter={checkDefaultFloor}/> 
     <Route path="/maps/:mapName" component={Map}/> 
     </Route> 
     <Route path="/about" component={About}/> 
    </Route> 
    </Router>