单击 <Link> 元素时路由器正在复制

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

而且我的主要路线是重复的：

我的路由器代码：

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 包装器。渲染到包装器而不是主体总是一个好主意，以防其他库改变 <body> 内容。在某些情况下，ready 包装器可以在您不希望它调用它的回调时调用它。进行这些更改至少应该使您处于更可预测的情况。

单击 <Link> 元素时路由器正在复制

Router is duplicating when clicking a <Link> element

javascript

reactjs

react-router