React Tutorial #12 - Routing

Hey gang, in this React tutorial for beginners I'll introduce you to React routing on the front-end. To do this we'll need to install the react-router package.

----- COURSE LINKS:

---------------------------------------------------------------------------------------------
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage...

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[hans_versluis]

When using module react-router-dom version 4, this error might occur:

cannot read property 'location' of undefined

Solution:
npm remove react-router --save
npm install react-router-dom --save

Edit index.js as folllows:
...
import { browserhistory, BrowserRouter as Router, Route } from 'react-router-dom';
...
var App = createReactClass({
render: function() {
return (
<Router history={browserhistory}>
<div>
<Route exact path={'/'}
<Route path={'/about'} component={About}></Route>
</div>
</Router>
);
}
});
...

[younus]

Hi Boss, Can you make course on MEAN stack(using angular 2), or create a playlist to build an app using MEAN(angular2).Thanx,
BTW on web technologies your tutorials are really awesome.

[dgdev]

WEBPACK 2 USERS: To enable the History API Fallback, add the following to your webpack.config.js, in the module.exports:

devServer: {
historyApiFallback: true
}

[aibolatimangaliyev]

if someone have error just try to use previous version of react-router, it helped me

[fenggeliu]

I am confused. Let's say what if my server already have mappings of those '/' and '/about'. Do I need to set up these routing too? or something else ( may I guess I do ReactDOM.render on both pages)?

[ameerosama]

No need To Downgrade version just use this code:
import {HashRouter as Router, Route, Link} from 'react-router-dom';
<Router>
<div>
<Route exact path={"/"} component={Home}></Route>
<Route path={"/about"} component={About}></Route>
</div>
</Router>

Use URL's: localhost:1234/#/
localhost:1234/#/about

[Shouzeegestof]

I don't understand why the routing doesn't work without the browserHistory import. Could you explain ?

[jaoaustero]

Failed prop type: The prop `history` is marked as required in `Router` How will i debug it?

[jimfilippou]

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

[BoyKiba]

i get this error, any ideas how to fix? "Uncaught TypeError: Cannot read property 'func' of undefined"

[syedbaryalay]

if someone can't learn then he's just a potato. awesome tuts,

[tejachava]

Cannot read property 'func' of undefined help me for this error

[ПавелЕфименко-йп]

you need to remake React tutorials, i guess this lessons are irrelevant already