Question

I'm trying to follow a React.js and React-Router tutorial (from here), but the example code doesn't work. I have no idea what I'm doing wrong.

This is my code. I get a Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). warning, then an Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. error.

What's going wrong?

import React from 'react';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
import ReactDOM from 'react-dom';
import Router from 'react-router';
import { DefaultRoute, Link, Route, IndexRoute, RouteHandler } from 'react-router';
import 'whatwg-fetch';

var MainLayout = React.createClass({
  render: function() {
    // Note the `className` rather than `class`
    // `class` is a reserved word in JavaScript, so JSX uses `className`
    // Ultimately, it will render with a `class` in the DOM
    return (
      <div className="app">
        <header className="primary-header"></header>
        <aside className="primary-aside"></aside>
        <main>
          {this.props.children}
        </main>
      </div>
    );
  }
});

var SearchLayout = React.createClass({
  render: function() {
    return (
      <div className="search">
        <header className="search-header"></header>
        <div className="results">
          {this.props.children}
        </div>
        <div className="search-footer pagination"></div>
      </div>
    );
  }
});

var UserList = React.createClass({
  render: function() {
    return (
      <ul className="user-list">
        <li>Dan</li>
        <li>Ryan</li>
        <li>Michael</li>
      </ul>
    );
  }
});

var Home = React.createClass({
  render: function() {
    return (
      <p>Welcome to the site</p>
    );
  }
});

ReactDOM.render((
  <Router>
    <Route component={MainLayout}>
      <Route path="/" component={Home} />
      <Route component={SearchLayout}>
        <Route path="users" component={UserList} />
        <Route path="search" component={SearchLayout} />
      </Route>
    </Route>
  </Router>
), document.getElementById('root'));

Answer 1

As far as I see, react-router API was changed from the date of tutorial publishing and now you have to use

import { Router } from 'react-router'

instead of

import Router from 'react-router'

or just append Router to your line with other imports from 'react-router'

import { Router, DefaultRoute, Link, Route, IndexRoute, RouteHandler } from 'react-router'

Getting error following React tutorial

1 个答案: