React Router（进入无限循环）：Uncaught RangeError：超过最大调用堆栈大小答案

【问题标题】：React Router (entering infinite Loop) :Uncaught RangeError: Maximum call stack size exceededReact Router（进入无限循环）：Uncaught RangeError：超过最大调用堆栈大小
【发布时间】：2016-03-06 08:06:30
【问题描述】：

我正在尝试找出我的 React 路由器代码 sn-p 出了什么问题。

我正在使用 React 路由器进行路由。我使用 nginx 作为我的服务器。

var createBrowserHistory = require('history/lib/createBrowserHistory')
var history = createBrowserHistory()

var Router = React.createClass({
    render: function() {
        return <Router history={history}>
            <Route path="/" component={Navbar}>
               <IndexRoute component={Index}/>
            </Route>
        </Router>
    }
});

module.exports = Router

我收到错误最大调用堆栈大小超出（我认为这意味着它正在循环）

这是我的 nginx 文件：

server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;

root /usr/share/nginx/html;
index index.html index.htm;

# Make site accessible from http://localhost/
server_name localhost;
location ^~ /static/ {
    root /home/sijan/personal/webpack;
}

location / {

    root /home/sijan/personal/webpack/static;
    rewrite .* /static/index.html last;
    try_files $uri $uri/ =404;
}
}

我在其他具有许多路线的项目中使用了相同的技术，我没有遇到任何问题。但是在这里，我正在尝试制作一个简单的网站，但我收到了这个错误，我不知道如何解决这个问题。（/不知道是 nginx 还是我写的反应代码）

任何建议都会很棒。

【问题讨论】：

不知道你的组件叫Router作为react-router组件是不是有问题。您可以尝试将其重命名为其他名称吗？我会尝试将反应代码与 nginx 设置隔离开来，以确定问题是由 nginx 配置还是您的反应代码引起的。您是否尝试使用 webpack-dev-server 运行您的 react 应用程序？或者，如果您的应用程序不大，您可以尝试使用您的反应代码创建一个 codepen，例如 this one。
是的，我正在使用 webpack。 webpack -w

标签： reactjs react-router

【解决方案1】：

我终于找到了问题的原因。

以下是我实际需要的库。

var Router=require('react-router').Router
var Route=require('react-router').Route
var IndexRoute=require('react-router').IndexRoute
var Index = require('./index')
var Navbar = require('./navbar')
var Content = require('./content')


var createBrowserHistory = require('history/lib/createBrowserHistory')
var history = createBrowserHistory()

var Router = React.createClass({
    render: function() {
        return <Router history={history}>
            <Route path="/" component={Layout}>
                <IndexRoute component={Index}/>
                <Route path="content" component={Content}/>
            </Route>
        </Router>
    }
});
module.exports = Router;

你可以清楚地看到，我已经包含了两个同名的变量（即 ROUTER）

这就是所提及问题的原因。

我刚刚将其中一个路由器的名称更改为 Router1，代码运行良好。

希望这对其他人有所帮助。

【讨论】：