SolidJS•12mo ago

Newest Router... Error about missing the wrapper Router component

This is more of a curiosity question for me... I just updated to the newest router. I'm using Solid... not Solid Start... I have an App component that had my routes in it. All of the Route components were wrapped in the Router component and the App component was default exported. In my index.ts file I imported the App component and used it in the render call. But I kept getting an error stating my routes were not wrapped in a Router. Why was this not working? It seems you have to direct render the Router in the render call for the routes to work.

1 Reply

Brendan•12mo ago

To migrate, ensure the only childen under Router are Routes. Move everything else you used to have that was inside Router into the new root property which gets passed the current matching route component as props.children. https://github.com/solidjs/solid-router?tab=readme-ov-file#configure-your-routes

const App = props => (
  <>
    <h1>My Site with lots of pages</h1>
    {props.children}
  </>
)

render(() => (
  <Router root={App}>
    <Route path="/users" component={Users} />
    <Route path="/" component={Home} />
  </Router>
), document.getElementById("app"));

const App = props => (
  <>
    <h1>My Site with lots of pages</h1>
    {props.children}
  </>
)

render(() => (
  <Router root={App}>
    <Route path="/users" component={Users} />
    <Route path="/" component={Home} />
  </Router>
), document.getElementById("app"));

Gaming

Programming

Newest Router... Error about missing the wrapper Router component