React Router：TypeError：oldElement._store未定义

Question

尝试使用现有的应用程序并使用最简单的HashLocation方法启动React路由器。

使用： 反应0.12.2 React Router 0.12.4

main.js（切入点）：

// Create App Container
$('body').prepend('<div id="appContainer"></div>');

// Run the App
Router.run(Routes, function (Handler) {
  React.render(React.createElement(Handler), document.getElementById('appContainer'));
});

routes.jsx：

var React = require('react'),
    Router = require('react-router'),
    Route = Router.Route,
    DefaultRoute = Router.DefaultRoute,

    App = require('./app'),
    Question1 = require('./views/question1'),
    Question2 = require('./views/question2'),
    Question3 = require('./views/question3'),
    Question4 = require('./views/question4'),
    Question5 = require('./views/question5'),
    Question6 = require('./views/question6'),
    Question7 = require('./views/question7'),
    Result = require('./views/result');

var Routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="questions/1" handler={Question1}/>
    <Route name="questions/2" handler={Question2}/>
    <Route name="questions/3" handler={Question3}/>
    <Route name="questions/4" handler={Question4}/>
    <Route name="questions/5" handler={Question5}/>
    <Route name="questions/6" handler={Question6}/>
    <Route name="questions/7" handler={Question6}/>
    <Route name="results" handler={Result}/>
    <DefaultRoute handler={Question1}/>
  </Route>
);

module.exports = Routes;

app.jsx：

var Router = require('react-router');
var Link = Router.Link;
var RouteHandler = Router.RouteHandler;

var App = React.createClass({
  render: function() {
    return (
      <section id='app' style={styles.app}>
        <header>
          <ul>
            <li><Link to="questions/1">Question 1</Link></li>
            <li><Link to="questions/2">Question 2</Link></li>
            <li><Link to="questions/3">Question 3</Link></li>
            <li><Link to="questions/4">Question 4</Link></li>
            <li><Link to="questions/5">Question 5</Link></li>
            <li><Link to="questions/6">Question 6</Link></li>
            <li><Link to="questions/7">Question 7</Link></li>
            <li><Link to="results">Results</Link></li>
          </ul>
        </header>

        <Router.RouteHandler/>

      </section>
    );
  }
});

module.exports = App;

question1.jsx（其他问题也是这样）：

var React = require('react');

var Question1 = React.createClass({
  render: function() {
    return (
      <div>
        Question 1.
      </div>
    );
  }
});

module.exports = Question1;

当我点击app.jsx中呈现的任何链接时，Firefox的控制台会显示以下错误：

这会将我带到构建的main.js文件中的这一行：

然而，在Chrome中，我得到一个完全不同的错误：

有趣的是，如果我手动刷新整个页面，屏幕上会显示正确的问题，例如，如果我打开一个新标签并转到http://localhost:9090/#/questions/1，它将显示＆＃34;问题1＆＃34;屏幕上：

但是，当我点击问题2时，这就是触发错误的原因：

但是，如果我在问题/ 2网址上完全重新加载页面，它将起作用：

Answer 1

事实证明，使用全局构建（与Bower一起安装）可以立即修复此问题。此错误是由使用NPM构建而不是全局构建引起的。在这个错误场景中，我正在从NPM安装React路由器，它返回lib / index.js文件，一目了然看起来正确，但显然使用该导出存在问题。

因此，要解决此问题，只需运行bower install --save react-router，如果您正在使用browserify（或其他支持CommonJS的捆绑包），请更新您的package.json浏览器字段以包含填充程序bower_components中的react-router：

"browser": {
  ...
  "react-router": "./bower_components/react-router/build/global/ReactRouter.min.js"
}

更新：在react-router的Github上提出问题：https://github.com/rackt/react-router/issues/903

Answer 2

我的猜测是node_modules/react-router/node_modules/react中的重复React导致问题。如果删除它，NPM应该可以正常工作。

另请参阅：https://github.com/facebook/react/issues/2402