0
votes

Trying to implement react-router 1.0.0-rc1 in my project and i am getting following errors:

1) Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components). 2) Warning: Only functions or strings can be mounted as React components. 3) Uncaught TypeError: Cannot read property 'toUpperCase' of undefined

routes.js file:

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

var Home = require('./components/home.js');
var Jobs = require('./components/jobs.js');
var JobDetail = require('./components/jobDetail');
var App = require('./components/app.js');
var About = require('./components/about.js');
var NotFoundPage = require('./components/notfoundpage.js');

var routes = (<Router>
        <Route path="/" component={App}>
            <Route path="jobs" component={Jobs}>
                <Route path="jobs-detail" component={JobDetail} />
            </Route>
            <Route path="*" component={NotFoundPage} />
        </Route>
    </Router>);

module.exports = routes; 

app.js file:

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

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

2 Answers

1
votes

You have two lots of the Router tag (one in app.js and one in routes.js).

Remove the Router tag from your routes file then app.js can be as follows:

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

I find the upgrade guide to be very useful

0
votes

Answer provided by @Clarkie was right but i was still missing few other things and finally managed to make it work.

1) i still had app component which was using which we do not need in 1.0.0-rc1. now we can have a route with desired path and component name. In my case now my route file(routes.js) looks some thing like this:

var routes = (
    <Route>
        <Route path="/" component={Home} /> 
        <Route path="jobs" component={Jobs}>
            <Route path="jobdetail/:id" component={JobDetail} /> 
        </Route>
        <Route path="about" component={About} />  
        <Route path="*" component={NotFoundPage} /> 
    </Route>    
    );

And i have rendered my route in initialize_app.js, in your case you can do that in app.js or some other file. Render code looks like this in my case:

var createHashHistory = require('react-router/node_modules/history/lib/createHashHistory');
var history = createHashHistory();

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

Please note, i have removed "Router" in routes.js as suggested by @Clarkie.

I have used hash style url, if you need clean url you can use createBrowserHistory as shown in doc.

2) Slight changes in importing the react-router: In previous version i used to require router and route as below:

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

But in new version its something like this:

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