[Content]: <Router> - root and Suspense are required with file-based routing

[klequis]

📚 Subject area/topic

SolidStart > Routing

📋 Page(s) affected (or suggested, for new content)

https://docs.solidjs.com/solid-start/building-your-application/routing

📋 Description of content that is out-of-date or incorrect

In a SolidStart project using <FileRoutes>, <Router> requires both

• A component as the value of its root prop.
• {props.children} must be wrapped in <Suspense>

See discussion that starts here: https://discord.com/channels/722131463138705510/861229287868858379/1255593230150402078

If there is agreement that these two points need to be made in the doc, I'll create a PR.

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

No response

[klequis]

Additional confirmation that Suspense is required

Question
Why am I getting a hydration error?

Answer
You forgot to wrap your routes with suspense

Why
Because inside FileRoutes there's a hidden mechanism of lazy loading your pages. That's why you need a suspense to make it work properly.