[Feature Request]: Update react-router example to use v6

[nstuyvesant]

The problem

This documentation is for react-router-dom@5. Version 6 has been out for 2 years and most React projects moved to it. There are no examples in the documentation (or elsewhere on the Internet) showing how to use react-router-dom@6 with @carbon/react.

The solution

Update the documentation to show clear examples with the latest router.

Examples

No response

Application/PAL

No response

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[tay1orjones]

@nstuyvesant Thanks for bringing this up! We're in the process of updating the tutorial right now, though it's going to be based on Next.JS. Right now I don't think we plan on providing specific documentation for the other various router/framework options out there (Remix, react-router, tanstack-router, etc.) though we'd welcome the community to contribute this type of information if you'd be interested in that.

Are you encountering a specific bug or usage issue with the latest react-router-dom?

[nstuyvesant]

Hi @tay1orjones - Thanks for the quick reply. Interesting to know about the updated tutorial focusing on next.js. While trying to use react-router-dom@6, had a few challenges like ClickableTile doesn't have an as property so I can pass in a <Link> from react-router. Another issue I saw was <SideNavMenuItem> disappearing after interacting with anything in an <Outlet> unless the parent <SideNav> had expanded set to true.

Mostly, there was a lot of trial and error as I am working to rebuild a docs site for @carbon/charts that I originally created using carbon-components-svelte. The team preferred react with vite over SvelteKit or react with next.js.

[tay1orjones]

@nstuyvesant Thanks for the additional info! Sorry to hear you ran into those issues. If you think there's things that could be done to fix or smooth over those issues, please let us know. We could probably spin those out into multiple/individual bugs if it's across multiple components as you mentioned.

Moving forward we probably won't house framework-specific documentation outside of the tutorial, but if you're interested, you could update the existing react-router example in the repo to show some of the patterns you uncovered. I think it could help a good portion of folks, particularly relating to the UIShell configuration. That example hasn't been updated in ~2 years.

[github-actions]

The Carbon team has accepted this proposal! Our team doesn't have the capacity to work on this now, so we are requesting community contributors. Please see the labels for roles that are needed. If you are willing to help out, comment below and we will get in touch!

[ychavoya]

Hi, I opened a PR to update the react-router example with some usages of react-router v6 with the UI Shell. I'm open to any suggestions!