React Router (entering infinite Loop) :Uncaught RangeError: Maximum call stack size exceeded

React Router (entering infinite Loop) :Uncaught RangeError: Maximum call stack size exceeded

我想弄清楚我的 React 路由器代码片段有什么问题。

我正在使用 React Router 进行路由。我正在使用 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 还是我写的反应代码)

任何建议都会很棒。

终于找到问题的原因了。

以下是我实际需要的库

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

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