POC: react router migration compatibility mode setup #2929
Conversation
Sarah4VT
added
🚧 Status: WIP
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -83,7 +83,7 @@ const renderIcon = (iconName, color, size) => { | |||
| }; | |||
|
|
|||
| export const component = () => ( | |||
| <Switch> | |||
| <Routes> | |||
There was a problem hiding this comment.
This is a full switch over to the v6 API. This was a straightforward route that I didn't see anything else that needed to be migrated, but let me know if I missed anything. Hard to test as I think these are the Percy screenshot tests that I don't have access to run?
There was a problem hiding this comment.
Example of a file with mixed v5 and v6 API's being used.
Switch your Route to a CompatRoute and then you can use v5 or v6 API. You can see the Routes that specified component (v5) I switched to element (v6), however on the last Route, using render is a v5 API only and needs to be converted to element as well. I left it in to demo both API's running at once in a single file.
| )} | ||
| /> | ||
| {allSortedComponents.map((Component) => ( | ||
| <CompatRouter> |
There was a problem hiding this comment.
Other than installing the package, adding the CompatRouter is the only setup that needs to happen to be able to use both v5 and v6 API's.
The rest of the line changes are just indention.
|
Hi @Sarah4VT The changes you are making here can be tested locally by running the Visual Testing App which is the one also used for the Percy integration. # Build packages
yarn build
# Start app
yarn visual-testing-app:startYou can then access the application in http://localhost:3000 |
Summary
This is a very small POC to see how the
react-router-dom-v5-compatpackage works and if it would be a good fit for us to leverage as we migrate from react-router v5 -> v6. It was mentioned at the very top of the official React-Router migration from v5 docs, and I didn't see it discussed (good or bad) in the RFC, so I assumed if it had been considered and rejected already, that would have been documented in the RFC.It seems to allow us to use the new v6 API's at the same time we use v5 features which allows for a gradual migration without breakages.
Description
The first commit sets up the package.
The second commit shows examples of a file fully migrated to using v6 only features. It also includes a file that demonstrates mixed v5 and v6 features in a single file.
Other notes
I tried to do this POC on app kit which probably has more interesting routes, but it's been a minute since I've worked in that project and I couldn't get it running and it was past Europe time zone to get chapter help. So I decided to try it in UI kit at least, but it's hard for me to test as I think these files are the Percy visual test files? I was going to open a PR anyways for people to review the code that was required to do this, but I'm watching to see if the visual tests pass, because I've never run these locally as I don't have the access to update them anyways.