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,代码运行良好。
希望这对其他人有所帮助。
我想弄清楚我的 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,代码运行良好。
希望这对其他人有所帮助。