反应路由器 onEnter 函数“未捕获 RangeError：超出最大调用堆栈大小”答案

【问题标题】：React Router onEnter Function "Uncaught RangeError: Maximum call stack size exceeded"反应路由器 onEnter 函数“未捕获 RangeError：超出最大调用堆栈大小”
【发布时间】：2017-01-26 15:32:02
【问题描述】：

我正在检查要设置的配置值，如果我想重定向到子路由。如果不是像往常一样显示。该代码确实按预期更新了 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'))

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我遇到了类似的问题。解决方案是实施 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>

【讨论】：

【解决方案2】：

它进入了一个无限循环，因为每次你输入路由 /maps checkDefaultFloor() 时都会执行重定向到 /map's 子节点之一。

重定向再次触发onEnter -> checkDefaultFloor()，因此无限递归。

例如，您需要做的是移动 componentDidMount 或 <Maps /> 中的功能，或者检查您是否尚未重定向

hasRedirected = false;

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

【讨论】：

>> 移动的 componentDidMount 中的功能——为我工作
用替换看看另一个答案，如果它有效，我更喜欢它

【解决方案3】：

你的browserHistory.push() 语句使它进入一个无限循环，因为路由嵌套在你的map 路由中。你需要使用replace函数和callbacklike。

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

【讨论】：

我认为这个答案可能会更好，你确定 replace 不会再次触发 onEnter 吗？
替换是为了达到目的