# Creating a Single-Page App in React using React Router
**URL:** https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201
**Category:** programming
**Created:** [March 20, 2017, 1:42am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201 "2017-03-20T01:42:15Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [March 20, 2017, 1:42am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/1 "2017-03-20T01:42:15Z")
by [kirupa](http://www.kirupa.com/www.kirupa.com/me/index.htm) | 5 March 2017
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](https://www.kirupa.com/react/introducing_react.htm) 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:
* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/react/creating\_single\_page\_app\_react\_using\_react\_router.htm](http://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)
---
### Author:  [@balaMurgan](https://forum.kirupa.com/u/balaMurgan)
#### Post date: [April 18, 2017, 6:31am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/2 "2017-04-18T06:31:39Z")
Hi, waht changes do I need to make to the code to get it running on react router 4.1.1?
Please help, as I am stuck on this since days.
Thanx,
Bala
---
### Author:  [@balaMurgan](https://forum.kirupa.com/u/balaMurgan)
#### Post date: [April 18, 2017, 6:39am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/3 "2017-04-18T06:39:53Z")
Could you pls mention the github link for this code.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 18, 2017, 6:00pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/4 "2017-04-18T18:00:40Z")
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 🙂
---
### Author:  [@balaMurgan](https://forum.kirupa.com/u/balaMurgan)
#### Post date: [April 19, 2017, 12:36am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/5 "2017-04-19T00:36:03Z")
Thanx for the quick revert. Eagerly waiting for it.
Request you to provide it ASAP.
---
### Author:  [@sctm81](https://forum.kirupa.com/u/sctm81)
#### Post date: [April 21, 2017, 7:45am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/6 "2017-04-21T07:45:54Z")
Yes, please update ASAP. I purchased your book and couldn’t progress as this critical part isn’t working.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 21, 2017, 4:28pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/7 "2017-04-21T16:28:16Z")
You can use the older version of React Router to get familiar with how it works, but updating it is on my to-do list 🙂
---
### Author:  [@sctm81](https://forum.kirupa.com/u/sctm81)
#### Post date: [April 24, 2017, 11:21pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/8 "2017-04-24T23:21:17Z")
Could you please explain how to do use the ‘older version’ of React Router? I’m just stuck trying follow the example in the book. Thanks
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [April 24, 2017, 11:34pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/9 "2017-04-24T23:34:21Z")
There is a typo in the React book currently. Please include this file:
``
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 🙂
---
### Author:  [@sctm81](https://forum.kirupa.com/u/sctm81)
#### Post date: [April 24, 2017, 11:41pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/10 "2017-04-24T23:41:53Z")
Thanks for the quick reply. Yes, that works now.
---
### Author:  [@janh](https://forum.kirupa.com/u/janh)
#### Post date: [May 1, 2017, 6:18am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/11 "2017-05-01T06:18:51Z")
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.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 1, 2017, 11:27pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/12 "2017-05-01T23:27:52Z")
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) 🙂
---
### Author:  [@criszama](https://forum.kirupa.com/u/criszama)
#### Post date: [May 19, 2017, 8:11am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/13 "2017-05-19T08:11:39Z")
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
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [November 5, 2017, 8:45pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/14 "2017-11-05T20:45:49Z")
I just updated this tutorial to work with React Router 4 and create-react-app! Sorry for the massive delay on that, everyone 🙂
---
### Author:  [@yogita.rjpl](https://forum.kirupa.com/u/yogita.rjpl)
#### Post date: [November 22, 2017, 6:11pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/15 "2017-11-22T18:11:16Z")
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.
---
### Author:  [@arol](https://forum.kirupa.com/u/arol)
#### Post date: [December 14, 2017, 10:07am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/16 "2017-12-14T10:07:23Z")
When we run npm start the default url is localhost:3000.
I was wondering if I can use my own domain dev instead of localhost without running nmp run build
Could you help me with this?
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 16, 2017, 8:55pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/18 "2017-12-16T20:55:35Z")
Does this help? [https://github.com/facebookincubator/create-react-app/issues/1959](https://github.com/facebookincubator/create-react-app/issues/1959)
🙂
---
### Author:  [@Tirumalesh\_Chinna](https://forum.kirupa.com/u/Tirumalesh_Chinna)
#### Post date: [December 23, 2017, 8:03pm UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/19 "2017-12-23T20:03:12Z")
Why there is a “#” in the urls,
Ex: [http://localhost:3000/#/contact](http://localhost:3000/#/contact)
how to remove that?
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 26, 2017, 3:22am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/20 "2017-12-26T03:22:42Z")
That is because you (and the tutorial) are using `HashRouter`. The `BrowserRouter` component should avoid that: [https://reacttraining.com/react-router/web/api/BrowserRouter](https://reacttraining.com/react-router/web/api/BrowserRouter) 🙂
---
### Author:  [@Fictionfree](https://forum.kirupa.com/u/Fictionfree)
#### Post date: [December 27, 2017, 8:16am UTC](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201/21 "2017-12-27T08:16:25Z")
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?
[Next page](https://forum.kirupa.com/t/creating-a-single-page-app-in-react-using-react-router/636201.md?page=2)