React-router Uncaught TypeError: type.toUpperCase

2019-09-18 15:02发布

问题:

I'm using the latest version of react, react-router, gulp and browserify I got this in beowser console: Uncaught TypeError: type.toUpperCase is not a function

my code in app.js:

"use strict";
var React = require('react');
var Router = require('react-router');
var Header = require('./components/Header');
var Index = require('./components/Index');
var About = require('./components/About')
var Route = Router.Route;
var IndexRoute  = Router.IndexRoute ;


var App = React.createClass({
  render: function(){
    return (
      <div>
        <Header />
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
})
React.render(<Router><Route path="/" component={App}>
<IndexRoute  component={Index}/>
<Route path="about" component={About}/>
</Route>
</Router>, document.getElementById('app'));

回答1:

Just upgrade your react router version from 0.0.13 to 1.0.0-rc1(beta) coz the below code will only work for 1.0.0 beta version which is mentioned in change log.

React.render(<Router><Route path="/" component={App}>
<IndexRoute  component={Index}/>
<Route path="about" component={About}/>
</Route>
</Router>, document.getElementById('app'));

After upgrading version you have to declare router properly like below.

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

Now router is defined properly. This worked for me..give a try.