Cannot read property 'location' of undefined in React Router example - reactjs

Question

Trying to do the most simple example possible with React Router.
Every example I've looked at is very different and many include 20 page tutorials. I just want a simple root path to work:
...
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://npmcdn.com/react-router/umd/react-router.min.js"></script>
...
var insert_point = document.querySelector('#container');
var App = React.createClass({
render: function() {
return (
<div>
<h1>Simple SPA</h1>
<ul>
<li>Home</li>
<li>Stuff</li>
<li>Contact</li>
</ul>
<div>
</div>
</div>
)
}
});
ReactDOM.render(
<ReactRouter.Router>
<ReactRouter.Route path="/" component={App}>
</ReactRouter.Route>
</ReactRouter.Router>,
insert_point
);

Answer 1

Since you're in the browser, you'll need react-router-dom too, a separate package in v4. react-router only contains the core, but for the DOM bindings you need the former package:
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
Then, get what you need from the global ReactRouterDOM. I find it easier just to use destructuring assignment to get what you need:
var { BrowserRouter, Route } = ReactRouterDOM;
Then you can do:
<BrowserRouter>
<Route exact path="/" component={App} />
</BrowserRouter>
The problem was that you weren't using the correct router -- for the web use BrowserRouter. Then, use Route and make sure to include the exact prop to only match the root route, in this case you can make Route self closing.

Answer 2

I suspect the problem is in how are you importing react router. When working with webpack I am using react-router-dom package and BrowserRouter
import { BrowserRouter as Router , Route, Switch} from 'react-router-dom'
Which are correct packages for V4. So at least I think you should use cdn that provides react-router-dom
also Try to use BrowserRouter instead of Router.
Aside from this, you can close your Route component immediately
<ReactRouter.Route path="/" component={App}/>
Also I do not understand your intentions with insertion_point as they are in your code.