React Router: TypeError: oldElement._store is undefined

Question

尝试使用现有的应用程序并使用 React Router 和最简单的 HashLocation 方法开始。

使用：反应 0.12.2 反应路由器 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 中呈现的任何 link 时，Firefox 的控制台显示此错误：

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

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

有趣的是，如果我手动刷新整个页面，正确的问题就会出现在屏幕上，例如，如果我打开一个新标签并转到 http://localhost:9090/#/questions/1，它将在 "Question 1"屏幕：

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

但是，如果我在 questions/2 url 时完全重新加载页面，它将起作用：

Answer 1

事实证明，使用全局构建（与 Bower 一起安装）立即解决了这个问题。此错误是由于使用 NPM 构建而不是全局构建引起的。在这个错误场景中，我从 NPM 安装 React Router，returns 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 上提出问题：Router breaks when using the NPM build of React Router

Answer 2

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

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

React Router: TypeError: oldElement._store is undefined

React Router: TypeError: oldElement._store is undefined

reactjs

react-router