UI: Migrate router to react-router

[ndelangen]

Issue: #14619

What I did

I migrated storybook to use react-router v6 (seems to be in beta)

react-router: https://github.com/remix-run/react-router

I following this migration-guide:
https://github.com/remix-run/react-router/blob/main/docs/guides/migrating-reach-to-6.md

I took the minimal resistance path, meaning I have retained the Location component and how it works.
Even though this is NOT something react-router provides.
Instead react-router provides hooks and Route components, but retrieving the location has to be done using a hook.
I agree that this is a good change, and we should do it at some point, but baby-steps.
Let's provide the upgrade works, and then take further steps.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

Nx Cloud Report

CI ran the following commands for commit c325477. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

Status	Command
	nx run-many --target=prepare --all --parallel --max-parallel=15

---

Sent with 💌 from NxCloud.

[ndelangen]

I have some more work todo on making all stories pass that wanted the router with a mocked value

[ndelangen]

hmm, the preview stories seem to still be missing some data from the manager state.

The app stories look like correct changes to me.

[shilman]

Tried it out in the example projects and it's looking pretty great @ndelangen! If we can get those stories fixed, do you think it's safe to merge for 6.4?

[ndelangen]

I find it hard to say, how safe it is to merge into 6.4. I'm 95% confident it should be fine tbh.

There could be complications if a user is using react-router and is mocking it or something. Then it might break in docs, maybe. Again it's hard to say.

I suspect the conflicts will be minimal, but if they happen the user can reach out to me, and if I get a repro I can debug.

[alvis]

Thanks so much @ndelangen! When those stories are fixed, I'm happy to try on our private repo as a next release.
The earlier we put it into next, the more time the community can check if there's any issue with the changes.

[yannbf]

To test:

• Navigate to story
• Navigate to about page
• Force reloading
• Composition
• Args change
  Args get completely reset when typing characters like @ or ?. I guess it makes sense as they are sanitized, but the entire arg is cleared from the URL and not just the special characters. Is this intended? I know it's not related to this PR though
• Globals change

[stof]

tests are still using it, so it should stay in devDependencies

[shilman]

Any chance you can make a PR? 🙏

[stof]

@shilman here you go: #16525