[docs] Full documentation for React Router integration

[apedroferreira]

Closes #4045
Closes #4149

• Adds integration guide for React Router: https://deploy-preview-4185--mui-toolpad-docs.netlify.app/toolpad/core/introduction/integration/#react-router
• Adds example with Vite & React Router
• Adds Vite project playground for development

Supporting Vite starter in create-toolpad-app will be done as a separate issue: #4235 (planned for v0.9.0)

[Itamaram]

While this is much needed and very appreciated, I believe this example would be more useful if it showcased integration with the new data api routers.

[apedroferreira]

While this is much needed and very appreciated, I believe this example would be more useful if it showcased integration with the new data api routers.

Didn't know about those, thanks a lot! Will definitely use those instead in the examples.

[prakhargupta1]

• Mention core-vite example in: https://deploy-preview-4185--mui-toolpad-docs.netlify.app/toolpad/core/introduction/examples/

[Janpot]

We could add a working example on the page? Should just work in an iframe with the browser router.

[apedroferreira]

We could add a working example on the page? Should just work in an iframe with the browser router.

I've been trying to do this with the Browser Router but our demo iframes have no src set which means they default to about:blank, there is no way to set an src unless we modify the Material UI repo component, and there seems to be no way to make the React Router work with about:blank as far as I've tried and looked.

So I guess we can just have an image instead of a live demo and users can just try out the Vite + React Router example themselves?

Or i guess we can try making src configurable in docs/src/modules/components/Demo.js... that might help be able to do this.

[Janpot]

we could use the memory router?

[apedroferreira]

we could use the memory router?

ok that should work

[apedroferreira]

• Added link to Vite example in examples grid
• Fixed all Vite app examples as router configuration was not 100% correct
• Updated docs and integration guide instructions to fit this configuration + use live example of Vite app instead of an image, as close as possible to the actual example app

[Gaen]

This is really helpful, thank you very much!