Revisit React Router DOM 6.4

[reboottime]

"New Features"

• Supporting fetching data on react-router-dom via the loader property on Route.
  • In react-router-dom v6, it has the data fetching capability, but it lacks a caching solution on the frontend side.
  • It implements the concept of fetching early to improve the user experience.
  • The significant drawback of not using react-query for data fetching is that it fetches data too often when relying on the built-in support provided by react-router-dom v6.
  • How to integrate the loader feature with react-query
• Built in support using lazy on Route component
• Exception handler for data fetching or rendering error handling via errorElement
• Optional segments, satisfies the needs that some route params could be optional
• Layout Routes vs Routes
  • Routes: to group a bunch of route
  • layout route: to sharing UI elements between routes, sample code can be found at here

[reboottime]

Reference

• React Query meets React Router
• react-router-dom v6.4