React路由器（进入无限循环）：未捕获的RangeError：超出最大调用堆栈大小

Question

我试图找出我的 React 路由器代码片段出了什么问题。

我使用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

我收到错误“Maximum call stack size exceeded”（超出最大调用堆栈大小）（我认为这意味着它正在循环）

这是我的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还是react代码）

任何建议都会很棒。

Answer 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，代码运行良好。

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