React Router onEnter函数“未捕获的范围错误:超过了最大调用堆栈大小”

Question

我正在检查要设置的配置值，如果是，我想重定向到子路由。如果不是像往常一样显示。代码确实按预期更新了URL，但随后进入了无限循环。

索引.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

您的浏览器History.push（）语句使其进入无限循环，因为该路由嵌套在您的地图路由中。您需要使用替换函数和回调等。

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

Answer 2

它会进入一个无限循环，因为每次您输入路由/map时，都会执行checkDefaultFloor（），该路由会重定向到/map的子节点之一。

重定向在输入时触发 -

您需要做的是移动组件中的功能Did加载

hasRedirected = false;

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

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>