Can't read property 'location' undefined in React Router example
Trying to do the simplest example with React Router. Each example I've looked at is very different and many include 20 lessons. 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
);
source to share
Since you are in a browser, you will need a react-router-dom
separate package in v4. react-router
contains only the core, but for DOM bindings you need the old 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 to just use destruct 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 web use BrowserRouter
. Then use Route
and don't forget to include the exact
prop for the root route only, in which case you can do Route
the closing itself.
source to share
I suspect the problem is with the way you import the react router. When working with webpack I am using react-router-dom and BrowserRouter package
import { BrowserRouter as Router , Route, Switch} from 'react-router-dom'
What are the correct packages for V4. At least I think you should use the cdn that react-router-dom provides
Also try using BrowserRouter instead of Router.
Alternatively, you can immediately close your route component
<ReactRouter.Route path="/" component={App}/>
And I don't understand your intent with the insertion_point
way it is in your code.
source to share