Creating a Single-Page App in React using React Router


#1

by kirupa | 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 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

#2

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


#3

Could you pls mention the github link for this code.


#4

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 :slight_smile:


#5

Thanx for the quick revert. Eagerly waiting for it.
Request you to provide it ASAP.


#6

Yes, please update ASAP. I purchased your book and couldn’t progress as this critical part isn’t working.


#7

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 :slight_smile:


#8

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


#9

There is a typo in the React book currently. Please include this file:

<script src="https://npmcdn.com/[email protected]/umd/ReactRouter.min.js"></script>

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 :slight_smile:


#10

Thanks for the quick reply. Yes, that works now.


#11

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.


#12

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) :slight_smile:


#13

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


#14

I just updated this tutorial to work with React Router 4 and create-react-app! Sorry for the massive delay on that, everyone :slight_smile:


#15

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.


#16

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?


#18

Does this help? https://github.com/facebookincubator/create-react-app/issues/1959

:slight_smile:


#19

Why there is a “#” in the urls,

Ex: http://localhost:3000/#/contact

how to remove that?


#20

That is because you (and the tutorial) are using HashRouter. The BrowserRouter component should avoid that: https://reacttraining.com/react-router/web/api/BrowserRouter :slight_smile:


#21

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?