Issue on page /react/routes.html [18. Using Different Routes]

[avimishra18]

Issue

react-router-dom package had a major update from v5 to v6. It has a lot of breaking changes. 18. Using Different Routes was written at the time of v5. But the command:

yarn add react-router-dom

Mentioned here will install the latest version i.e. v6 now.

Link to Community Discussion. Assigning this issue to myself.

Possible Solution

There can be two approaches to deal with the issue. Requesting community members to give their valuable guidance in selecting the correct approach.

Approach 1 (Pinning major version to v5)

We can be specific about the version. And update the command to:

 yarn add react-router-dom@^5.0.0 

Approach 2 (Migration from v5 to v6)

We can update the documentation following steps mentioned in the official documentation of react-router-dom: Migration to v6. Some, changes that needs to take place:

Format: v5 code => v6 code

1. <Routes component={Component}/> ⇒ <Route element={<Component/>}/>
2. useHistory() ⇒ useNavigate()

[stevepiercy]

For this one, I would check with the Volto frontend folks if they have future plans to migrate to v6. For the upcoming Volto v15.0 release, it is at 5.2.0.

[avimishra18]

@nileshgulia1 @TC5022

[avimishra18]

Unassigning myself as discussed here.

[TC5022]

Thank you @avimishra18
@stevepiercy Should I go ahead and update v5 to v6?

[stevepiercy]

@TC5022 please check the Volto GitHub issue tracker for an existing issue for any plans they may have to make the upgrade. If there as an issue for it, then respond there, else create a new issue to start the conversation. Also add a link from that issue to this issue, mentioning that when Volto is updated, its corresponding Training documentation also needs to be updated.

As an aside, Volto 15 was released today. This would be a good suggestion for the next major release, Volto 16, as it would be a breaking change.

[nileshgulia1]

@TC5022 As steve said, you can start the conversation at https://github.com/plone/volto by creating an issue, followed by a nice PR.

[TC5022]

@stevepiercy @nileshgulia1 Got it! Thank you for your guidance 💯