React路由器：TypeError：oldElement._store未定義

Question

嘗試使用最簡單的HashLocation方法開始使用React路由器。

使用： 陣營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呈現的任何鏈接，Firefox的控制檯顯示此錯誤：

這需要我在建立main.js文件中的這一行：

然而，在Chrome中，我得到一個完全不同的錯誤：

有趣的是，如果我手動刷新整個頁面，如果我打開一個新標籤，然後轉到屏幕上顯示了正確的問題，例如http://localhost:9090/#/questions/1它會顯示「問題1」在屏幕上：

但是，當我點擊第二個問題，這是什麼觸發錯誤：

但是，如果我重新加載頁面完全，而在問題/ 2的網址，它會工作：

Answer 1

事實證明，使用全局構建（與Bower一起安裝）可以立即解決這個問題。此錯誤是由使用NPM構建而不是全局構建引起的。在這種錯誤情況下，我從NPM安裝了React Router，它會返回lib/index.js文件，這些文件一目瞭然，但顯然存在使用該導出的問題。

因此，要解決這個問題，只需運行bower install --save react-router如果你正在使用browserify（或支持CommonJS的另一捆綁），更新您的package.json的瀏覽器領域，包括在bower_components墊片爲反應路由器：

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

UPDATE：提交的react-router的Github上的問題：https://github.com/rackt/react-router/issues/903

Answer 2

我的猜測是重複的反應。在node_modules/react-router/node_modules/react造成的問題。如果你刪除它，NPM應該可以正常工作。

另請參閱：https://github.com/facebook/react/issues/2402