React router not working - no errors

Question

import React, { Component } from 'react';
import './App.css';
var ReactRouter = require('react-router');
var Router  = ReactRouter.Router;
var Route = ReactRouter.Route;
var Navigation = ReactRouter.Navigation;

var StorePicker = React.createClass({
render : function() {
return (
  <form className="store-selector">
    <h2>Please Enter A Store</h2>
    </form>
)
}

});

var routes = (
<Router>
<Route path="/" component={StorePicker}/>
<Route path="store" component={App}/>
</Router>
)
export default routes;

---

I am trying to work with react router. This code is not working. It doesn't gives any errors. But it gives two warnings.

---

Warning: Failed prop type: The prop history is marked as required in Router , but its value is undefined . in Router

---

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Answer 1

For the warning:
(Warning: Failed prop type: The prop history is marked as required in Router, but its value is undefined. in Router)

You're missing the history definition for your Router try:

<Router history={}>
  <Route path="/" component={Home} />
</Router>

NB: You'll have to add the chosen history type to your imports with React router, so if you choose to add browserHistory your import would look something like this:

import { , Router, Route } from 'react-router'
           ^---added as a named import

---

A brief explanation of the different options:

browserHistory : bases your path of the full url starting with the route '/'. So if your SPA is at www.myapp.com , the root path will coorespond to www.myapp.com/ by default. So if you wanted a route to www.myapp.com/blog , you would need to define a router path of ' /blog '.

hasHistory : does the same thing but the root starts from the first # character found in the url: example.com/#/some/path would correspond to: /some/path

createMemoryHistory : used for testing and for server rendering. This option does not read from or manipulate the address bar.

Check out: React Router Histories for more info