Step 4

In the previous step, we tried using the state to control what content displays to the user. To that aim, we added a showHomepage property to this.state. We used this property to control what content should display on the screen. If this.state.showHomepage is true, then we'll show the list of all existing notes. If this.state.showHomepage is false, then we'll show the AddNote component.

There is a fundamental issue with this approach. The page URL remains the same when we switch views. The standard practice is to use a different URL when switching from one page (view) to another. Indeed, using URL for navigation is essential for bookmarking pages, among other things such as keeping a browsing history. We would not be able to use the back or forward button to go back and forth between views.

Routing comes into play whenever you want to use a URL to navigate between different pages in your application.

Traditionally, it requires a back-end (web) server to handle routing requests for different pages. For example, when a user visits a URL, the server responds with the HTML file (and associated styling/script files) for the page related to it.

In React apps, we can replicate the same effect by using third-party libraries for routing. A popular choice is react-router, which provides a collection of navigational components for React applications.

The react-router library manipulates and uses the browser's session history to provide a sense of routing!

We will employ react-router in the next step.