What is routing? Why is "routing" needed in single page web apps?

This is a very good question, and one that I don't see discussed as often as I think it should be. The short answer is that often, in a Single Page Web Application, you don't need routing. If you are building an application which doesn't require its pages to be indexed by Google, and you either don't care, or don't want the user to be able to Bookmark pages, then there is no reason to implement routing. In an SPA, routing adds additional complexity and effort, so if you can avoid doing it, you should. Of course, modern frameworks such as Angular and React provide facilities for making routing much easier, but even then some things can be hard to do with routing, for example animating between pages. A good example of a web application where routing would be redundant would be a multi-page form which you want to control the user's passage through and possibly prevent them from returning to pages which have became inapplicable. Implementing such a form with routes would be a nightmare as you would have to prevent the user from visiting certain pages in their history.

It's useful to ask yourself what a route actually is in a SPA. It's easy to think of it as just a 'web-page', but what it really is is a state, and when you navigate between routes what you are really doing is navigating between different states of the app. The fact that the appearance of the app may change between states is incidental to what is really going on. So what a route does is give the user a means of returning to particular states of the app. You should only implement a route in an SPA when there is a state of the app which you want the user to be able to return to. An alternative, and perhaps more useful way of doing this, would be to implement Undo and Redo mechanisms.

Of course, even when you don't have routes you still have to care about what happens when the user clicks the History Back button, but then you simply have a modal alert which warns them that they are about to leave the app should they proceed with the navigation.

I also have this problem: "Why do we need routing?". You can write apps without routing at all. The code can get messy but still, it is not impossible.

My biggest reason for having routing is because if the user hits the Back button of the browser (Forward button as well, for that matter), he will not be navigating within the app. The user might expect to navigate within the app using the history of the different "pages" he loaded previously. Instead, he will be thrown out of the web app. Hitting the Refresh button would also throw him to the root of the app.

From the user's point of view, it is a regular web app (he doesn't need to know how it is designed: SPA or otherwise) and it should work as any web app/website should work. Routing ensures this, doesn't it?

Routing in SPAs is used to load certain parts of the web app e.g. yourappurl.com/profile/userid/ will load the profile part of an SPA with the right user profile corresponding to the userid. This can be seen in the GitHub example you provided:

<Router history={browserHistory}>
<Route path="/" component={App}>
  <Route path="about" component={About}/>
  <Route path="users" component={Users}>
    <Route path="/user/:userId" component={User}/>
  </Route>
  <Route path="*" component={NoMatch}/>
</Route>

SPA refers to the fact that in general you have an index.html as your "main view" and then depending on the routing you add/remove certain parts from the index.html with frameworks like React or AngularJS etc.

In desktop applications you have buttons and other controls to get what you want. So routing in UI apps would be the set of all UI controls. In web apps on the other hand, all functionality is accessed via some text which is the links and the parameters.

A URL is the path to access a functionality. Routing is like the mechanism to decide which functionality to call based on the provided URL and params.

So basically routing is a mapping between an URL and the functionality of a web server.