Now that you've familiarized yourself with the basics of how to work with React, let's kick things up a few notches. What we are going to do is use React to build a simple single-page app (also referred to as SPA by the cool kids...and people living in Scandinavia). Like we talked about in our React introduction forever ago, single-page apps are different from the more traditional multi-page apps that you see everywhere. The biggest difference is that navigating a single-page app doesn't involve going to an entirely new page. Instead, your pages (commonly known as views in this context) typically load inline within the same page itself:
I havenāt had a chance to convert this example into React Router 4.1.1 yet, but Iāll start fiddling with that shortly and post an update here once that has been done
The book doesnāt have the ā2.4.0ā version, and that causes the latest version to be incorrectly loaded. Itās been on the bookās hard-to-find errata page, so apologies for not spotting this as the problem earlier
I got the example in the tutorial working with react-router version 3.0.5 (loaded as an npm module). There are apparently a lot of breaking changes in version 4. In fact, it is described in various posts as a complete rewrite. Among other things, nesting of routes does not make the components associated with the child routes implicit āchildrenā of the component that is associated with the parent route. As a result, the sample application does not work as-is with version 4.
Yes - the breaking changes are quite numerous. Iām in the process of re-writing that article right now, so expect an updated version in a few days (barring any unforeseen delays)
Hello
thanks for this tutorial but i need a responsive menu ā¦
someone do you have a tutorial to make a navbar react-bootstrap without webpack?
thanks a lot
Hi kirupa, I followed your tutorial to create navigation in my project, But as soon as i introduced router in code. It fails with this exception
Stack: Invariant Violation: Hash history needs a DOM
It seems some imports are missing in your tutorial.
I first made a simple nav with home ,contact ,about and with components having about, home,etc each having an index.jsx. Now I want to add a few sub sections like vision, acknowledgement ,etc in about section like a drop-down. I made different folders for them and linked them up but since I already had an about page , when I click on the about link in navbar, the drop down opens up as well the about page, which I donāt want anymore. What should I do?
