12Routing
Until now, every user interface example you've seen in this book has only had a single screen and everything the application can do is displayed at once. In the real world, apps have multiple modes, tabs, and screens. The ability to change from an app's main screen to a settings screen, for example, makes it possible for user interfaces to do more while not overwhelming the user with complexity and clutter.
In this chapter, you'll learn:
- What routing is and why you need it.
- How routing works in single page applications.
- How to install and use React Router.
- How to create basic routes.
- How to create navigation.
- How to create nested routes.
- How to use React Router's hooks.
WHAT IS ROUTING?
The most basic concept behind the web (what we call Web 1.0) is that a web browser requests a web page from a web (HTTP) server using a unique URL. The web server then responds with an HTML page that is rendered in the browser, as shown in Figure 12-1.
When a user clicks a link on a web page, it requests a new HTML page, which the browser downloads and displays instead of the current page. Browsers and servers maintain a user's state between different web pages by using browser cookies, the localStorage API, and server-side data.
FIGURE 12-1: How the web works
The problem with loading a new web page each time a user clicks a link is that it doesn't create a smooth experience ...
Get Beginning ReactJS Foundations Building User Interfaces with ReactJS now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
