React-Router with React 13.3+

Question

I can't figure out how to use any relatively recent (react 13+) version of React-router . The example on the current README suggests integrating it by rendering Router directly (with routes defined via child Route elements). Another official overview doc seems to advise using Router.run. The react-router examples use the former. None work for me: I get different errors depending on use:

• When attempting to use react-router by rendering the Router element directly I get "Uncaught Error: Invariant Violation: A needs a valid Location”
• When attempting to use react-router by running Router.run with routes, I get “Uncaught TypeError: Cannot read property 'toUpperCase' of null”

Answer 1

here is a simplified version of how to use it, this is using webpack for requires but this is irrelevant, if you have access to React and Router it will work.

var React = require('react');
var Router = require('react-router');
var DefaultRoute = Router.DefaultRoute;
var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var Link = Router.Link;

var Comp0 = require('./comp0.jsx');
var Comp1 = require('./comp1.jsx');
var Comp2 = require('./comp2.jsx');

var App = React.createClass({
render: function () {
    return (
        <div>
            <div >
                <li><Link to="comp0">comp0</Link></li>
                <li><Link to="comp1">comp1</Link></li>
                <li><Link to="comp2">comp2</Link></li>
            </div>
            <div>
                <RouteHandler {...this.props}/>
            </div>
        </div>
     );
    }
});

var routes = (
  <Route name="app" path="/" handler={App}>
      <Route name="comp1"  handler={Comp1}/>
      <Route name="comp2"  handler={Comp2}/>
      <DefaultRoute name="comp0"  handler={Comp0}/>
  </Route>
);


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

Answer 2

I'm using react-router version 0.13.3 with react version 0.13.3 (yes both are same). I use the Router.run() way so that the UI can be re-rendered on URL change. I'll show my code that works well for me, it's in ES6 (although shouldn't be too hard to derive ES5 from it):

import React from 'react';
import Router, { Route, DefaultRoute, NotFoundRoute, Redirect, Link } from 'react-router';

// Components
import App from './components/App.js';
import Home from './components/Home.js';
import SampleComponent from './components/SampleComponent.js';

const AppRoutes = (
  <Route path="/" handler={App}>
    <DefaultRoute name="home" handler={Home} />
    <Route name="sample" handler={SampleComponent} />
  </Route>
);

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

Make sure the components you specify in AppRoutes is accessible (by importing or requiring them). Also in this case I've used DefaultRoute for instance in AppRoutes - so if you're using similar configurations then make sure you have them available from the react-router export. Hope that's clear.

If you're still facing issues then share your code.

Answer 3

I have an existing example code that you can have reference with - https://github.com/iroy2000/react-reflux-boilerplate-with-webpack

For those who are interested, it is called "React Reflux Workflow Boilerplate", and it is a workflow framework that make life easier for developers by providing a development and production ready build process framework out of the box.