React Router onEnter Function＆＃34; Uncaught RangeError：超出最大调用堆栈大小＆＃34;

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

我有类似的问题。解决方案是实施什么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>

Answer 2

进入无限循环，因为每次进入路线/maps checkDefaultFloor()都会被执行，重定向到/map's个孩子中的一个。

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

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

hasRedirected = false;

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

Answer 3

你$("#submit_search").click(function(){ var searchID= btn.data('mylink'); $.post("search.php?&searchID="+searchID,function(data) { $('#search_results_div').html(data).not('.hide3'); // I also tried $('.hide3').hide(); here but it hides the main navbar and not the new one created. }); }); <nav class="navbar navbar-inverse navbar-fixed-top hide3" role="navigation"> // content here 语句使它进入无限循环，因为路由嵌套在browserHistory.push()路由中。您需要使用map函数和replace之类的。

callback