react-router Uncaught TypeError：無法讀取未定義的屬性'toUpperCase'

Question

我正在嘗試使用react-router，但是當我編寫一個簡單的路由不起作用並且控制台顯示Uncaught TypeError時：無法讀取未定義的屬性'toUpperCase'。

否則當我使用沒有反應路由器運行良好

var React = require('react');
var ReactRouter = require('react-router');
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;

var App = React.createClass({
    render: function () {
        return (
            <div>Hello World</div>
        );
    }
});


React.render((
  <Router>
    <Route path="/" component={App} />
  </Router>
), document.body);

錯誤來自反應庫的這一行

function autoGenerateWrapperClass(type) {
  return ReactClass.createClass({
    tagName: type.toUpperCase(), //<----
    render: function() {
      return new ReactElement(
        type,
        null,
        null,
        null,
        null,
        this.props
      );
    }
  });
}

Answer 1

您正在使用1.0 Beta文檔中的示例，但您可能正在運行最新的穩定版本（0.13）。 主人的文檔來自1.0 Beta，這是混亂的根源。

閱讀最新穩定版的文檔： https ： //github.com/ReactTraining/react-router/tree/master/docs

Answer 2

我的猜測是當React.render執行時，路由器還沒有。 試試這個

 var routes = (
  <Route handler={App}>
  </Route>
);

Router.run(routes,(Root) => {
  React.render(<Root/>, document.body);
});

Answer 3

我仍然圍繞反應路由器，但我要檢查的第一件事是你正在使用的版本和你引用的文檔。 通過以下方式我能夠讓它工作......

var React = require('react');
var ReactRouter = require('react-router');
var Route = ReactRouter.Route;

var App = React.createClass({
    render: function () {
        return (
            <div>Hello World</div>
        );
    }
});

var routes = (
    <Route handler={App}>
    </Route>
);

window.onload = function() {
    ReactRouter.run(routes, ReactRouter.HistoryLocation, function(Root, state) {
        React.render(
            <Root />,
            document.getElementById('main')
        )
    });
};

基本上是PhInside說的，但是包含在window.onload中

Answer 4

在React.render()嘗試<Route>而不是<Router> 。