Objectives:

• explain the difference between client-side routing and sever-side routing
• set up routes within a React Application using the Router, Route and Link components.
• Use useParam to add dynamic Routes to an application
• Use useRouteMatch to add nested Routes to an application
• Use useHistory to programmatically navigate to other routes

Starter Code

Solution Code

Single-Page Application

A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application.

In an SPA, either all necessary code – HTML, JavaScript, and CSS – is retrieved with a single page load,[1] or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions.

The page does not reload at any point in the process, nor does control transfer to another page, although the location hash or the HTML5 History API can be used to provide the perception and navigability of separate logical pages in the application.[2]

Interaction with the single page application often involves dynamic communication with the web server behind the scenes.

Client Side vs Server Side Routing

• Client-side routing is a JavaScript managed routing option. It offers control over your site URL & content without necessarily having to wait for a server to respond with content. It is designed to mimic the appearance of traditional multi page websites.