Question

我正在尝试反应路由器，我已经设置了我的路线：

var routes = (
  <Route name="app" handler={App}>
    <Route name="customers" path="api/customers" handler={UserBox}/>
    <Route name="login" path="login" handler={LoginBox}/>
 </Route>
);

在我输入的导航栏中：

<ul className="nav navbar-nav">
                      <li><Link to="login">Login</Link></li>
                      <li><Link to="customers">Customers</Link></li>
                    </ul>

从表面上看，一切似乎都很好，但当我看到控制台时，我发现了这一点：

ReactMount: Root element has been removed from its original container. New container: null

我的主要路线是重复的： enter image description here

我的路由器代码：

var routes = (
  <Route name="app" path="/" handler={App}>
  <Route name="customers" path="/api/customers" handler={UserBox}/>
  <Route name="login" path="/login" handler={LoginBox}/>
  </Route>
  );


$(document).ready(function () {
    Router.run(routes, Router.HistoryLocation, function(Root) {
      React.render(<Root/>, document.body);
   });
});

Answer 1

我认为问题可能是你的动作（或其他）在你的transitionTo触发重新渲染的同时触发了重新渲染。尝试这个简单的修复，看看它是否解决了它：

window.setTimeout(function() {
  this.context.router.transitionTo('/api/customers')
}.bind(this), 0)

如果这没有帮助，请尝试渲染到包装器<div>，将引导脚本放在身体的底部，然后删除$(document).ready包装器。在其他lib变异<body>内容的情况下，渲染到包装器而不是主体总是一个好主意。在某些情况下，ready包装器可以在您不想要它时调用它的回调。进行这些更改至少应该让您处于更可预测的状态。

单击<link />元素时路由器正在重复

1 个答案: