Question

我想弄清楚我的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还是反应代码）

任何建议都会很棒。

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，代码工作正常。

希望这有助于其他人。

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

1 个答案: