With support for asynchronous component loading, dynamic routing, code-splitting and scroll-restoration, it is not surprising that React-Router is the most popular client-side routing library in the React ecosystem. We will get hands-on experience with React Router v4 in a variety of scenarios carefully designed to represent the use cases most developers face when building their own React apps.
React-RouterRouter, Route and Link
At the heart of React-Router are three components: Router, Route, and Link. We’ll walk through a side-by-side comparison of the routers included with React-Router v4, and demonstrate how path expressions are used to render components based on URL.
React-RouterEXERCISE: Recipe as a resource
Create routes for creating, listing and updating recipe resources. You must meet the following requirements:
- Users should be able to refresh the browser at any of these pages and see no change in what’s rendered,
- Hitting the back button should take you back to the previous application state.
Now that we have some experience with the basics, we’ll address some more nuanced routing concerns like:
- 404 Pages,
- Islands of URL-sensitive content,