ReactJS Basics - #15 React Router - Route Setup

For a SPA, you need a Router. ReactJS Router is a powerful Router which allows you to create & use Routes in your app!

----------

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[zoommair]

I wish I knew this tutorial was no longer relevant before I started. React Router v4 is so much easier to use and none of this tutorial applies anymore.

[otolulope]

Best teacher ever. If you dislike any of these videos, you have issues.

[cesarsc]

You are one of the best teachers in the world, Maximiliam. I love your tutos.

[പോളിമച്ചാൻ]

For those of you who are getting error on using multiple routes for the router, kindly enclose your route tags inside a switch component and then enclose the switch inside BrowserRouter. This worked for me on my react-router-dom version 4.3.1

[bogoodski]

All, please note that he is using React Router 3 during this video. So, in your package.json dependencies, revise "react-router" so it says ""react-router": "^3.0.0" and then run npm install. Alternative option is to learn React Router 4. However, installing version 3 will allow you to follow this video. Cheers!

[AllTheJCs]

Instead of "home-single", you should've called it "home-alone" :) Great video! Thanks for taking the time to teach others

[VanGestelJasper]

You are very pleasant to listen too :) Very interesting and educational videos! Keep it up.

[ralphlargo]

React Router is awesome. Better than the routing in angular i think? haha. Thanks. You're a very good teacher. I've learned so much because of your tutorials.

[StealWhoWhenAndWhat]

Thank you very much, so far have been learning the basics quite well.

[adamasy]

Hi Max, you're doing some great job with this course !!Nice hair cut !!!

[Tanzeel]

Purchased his course on Udemy. Bests Reactjs tutor in the world. Thanks Max.

[fantuns]

Thank you for all the videos, they're awesome! Really well structured and all the details are explained with good examples :)

[kidder]

You are really good at teaching, thank you for this awesome video, clear as crystal.

[JonasTStefansson]

This works for me at the time of posting, using react-router-dom and importing
import { BrowserRouter as Router, Route, browserHistory } from "react-router-dom":

return (
<Router history={browserHistory}>
<Root>
<Route path='/user' component={User} />
<Route path='/home' component={Home} />
</Root>
</Router>
);

[shyamsoni]

Hi, I am using
this.props.history.push({
pathname:`some path`,
state:{ object :object}
}) ;
on handleSubmit click
And reading the data into routed component like


This is working fine when I am using BrowserRouter even when i refresh the page i get the values on page BUT when I am using Hashrouter and I refresh the page I get error saying
Can not read properties of undefined

Please help

[hypncil]

Probably the best React tutorials on YouTube!
A brief question: So to be able to use pretty urls with react-router on localhost we use the api-history-fallback param in webpack. How do I do that on an actual hosting - namecheap/godaddy/etc?

[angelbein]

Oh! You had a haircut! :) Looks good on you teacher. Thanks for the series!

[Wook]

Academind, This video shows the basics really well, easy to follow and why you have a # I think was also good to mention.

[itsjhn]

Hi I'm new to this course coming from your ng2 Udemy course. You're a great instructor for sure. I'm jumping to your latest video to ask this. When might we expect this course to finish up? Are they prerecorded and you're just uploading them on a schedule? Could I maybe find/buy the entire course elsewhere?

[Wook]

Academind, I am doing a website on CruiseShips at the moment, but I am not sure how to do one of these routes for different Cruise Lines.
I am getting the Cruise Lines from migration database with a knex seeds table. Just to be clear I will have /cruise_line, so the Cruise Line can change.
Some examples are /royalcaribbean or /princess, so you can see that the path name changes, are you able to please show me how I can manage this?