SalesforceCommerceCloud
[FEATURE] Update to react-router-dom v6
There are some new features in react-router-dom v6 that I would like to use on a project but since PWA kit is using v5 its making it impossible to upgrade. The main problem I'm facing is being able to keep the scroll position of the page when rendering a new version of the page. Version 6 adds support for this functionality.
I would like PWA kit upgraded to use react-router-dom v6 as it will allow access to these newer features and also make it more compatible with newer versions of React.
I have tried other approaching to keeping the scroll position on the page but none of them have succeeded. There is fortunately a guide on upgrading from v5 and it was pretty easy to follow for the most part. I would be willing to do the work myself if I can submit a PR for it.
@rawalter21 thanks for asking, we're anticipating an update to react router as part of v3 I've added your feature request as part of that milestone. Stay tuned on a delivery date for v3 but it'll include react 18, chakra 2, and react router 6
Unfortunately this did not end up making the v3 cut. Can you specify which newer React Router v6 features you're looking to use so we can better understand the use case?
It's almost 2 years after this last comment and React Router is now on v7. React itself just updated to v19. I think it's self-evident why these crucial dependencies need to be kept up to date. Can you share any information on timing regarding upgrading these packages?
@timhettler we as a product engineering team focused on DX are in a constant plate spinning act against many competing priorities from customers. What would be helpful has not changed in 18 months -- it's the same as my unanswered question above from 18 months ago.
Could you provide specific details on how you are blocked by this outdated dependency?
In the meantime, a few weeks ago we discussed this update in the context of React 19 + Chakra 3, which are both on our radar as well.
We have a v4 update in the works, and along with it, it would be great if everyone in the community who needs or is blocked by something can give specific details so we can gauge urgency and relative priority
It's not about being "blocked" and this issue is not about React Router specifically. It's a larger issue of pwa-kit's core dependencies being out-of-date on a scale of years.
Believe me, I am sympathetic to the unceasing pace of technology upgrades within the front-end ecosystem. Some weeks I do nothing but upgrade dependencies. But staying up to date with the latest versions of core libraries ensures compatibility with other libraries and increased community support, which is essential for receiving help and finding resources.
Simply put, it's hard to attract developers to a project where they can't use the shiny new toys.
That said, here are some material benefits to upgrading React Router:
Improved TypeScript Support: React Router 7 offers enhanced TypeScript support compared to version 5, making it easier to integrate with TypeScript projects and leverage TypeScript's type-checking capabilities.
Data Fetching: The newer version introduces built-in data fetching capabilities using loaders that simplify loading data before a route renders. This can lead to cleaner and more efficient code.
Route-based Code Splitting: React Router 7 offers better support for route-based code splitting, which helps improve the performance of your application by loading only the code required for the current view.
Nested Routes and Layouts: React Router 7 provides improved support for nested routes and layout components, making it easier to build complex, hierarchical views and layouts.
Improved API: There are refinements to the API that make it more declarative and easier to understand, reducing boilerplate code.
Better Development Experience: With features like outlet components for rendering children in parent routes, React Router 7 enhances the development experience and maintains clear component hierarchies.
Enhanced Navigation Features: It includes advanced navigation techniques, such as blocking transitions in more flexible ways and handling redirects more efficiently.
@timhettler appreciate the feedback. A number of of those bullet items (for example Route-based code splitting and Data fetching) are not valid for this project. Route-based code splitting uses loadable as a core dependency in the upstream underlying runtime. Data fetching conflicts with our core assumption of using ReactQuery (tanstack).
But sure, the idea is to upgrade the core dependencies, no objection there.
Unfortunately there's not a lot of motivation for prioritizing the upgrade based on your feedback, when weighed against other projects we're working on that have a interdependent relationship with this, a new multi-extensibility model for v4 which will influence how these underlying packages are managed.