Mastering React Router V6 Part 1 ~ The Must Learn Client Side Routing for React

When developing a React SPA application, multi-page routing is a necessary requirement. The currently most popular client-side routing library is React Router. React Router V6 introduces a breaking change but also brings useful features compared to its predecessor. Let’s discuss!

Table of Content

Part 1

1. React router architecture
2. Route Component
3. Nested Route
4. Path segment (dynamic params, query params, etc)
5. Redirection
6. Error handler
7. Not found page

Part 2

1. Lazy loading & bundle splitting
2. Private route
3. React router hooks overview
4. Other features (scroll restoration, global navigation, etc)
5. Data APIs (NEW)
   a. loader
   b. action

1. React Router Architecture

React Router V6 introduces a new feature called data APIs, which can only be enabled by using a new router wrapper. There are four router wrappers available:

• createBrowserRouter