SolidJS•7mo ago

Avoid re-rendering toolbar in solid router 0.10.x

I have a SPA using with a common toolbar in between all the pages and using config based routing with useRoutes. It's similar to the example from the 0.9.x docs:

function App() {
  const Routes = useRoutes(routes);
  return (
    <>
      <A class="nav" href="/">
        Home
      </A>
      <A class="nav" href="/users">
        Users
      </A>
      <Routes />
    </>
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

function App() {
  const Routes = useRoutes(routes);
  return (
    <>
      <A class="nav" href="/">
        Home
      </A>
      <A class="nav" href="/users">
        Users
      </A>
      <Routes />
    </>
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  document.getElementById("app")
);

After migration to 0.10.x, useRoutes is not available anymore. New doc says children must be used. It works when putting the array from the config based routing directly as child of <Router>, but I loose the toolbar. If I would switch to <Route> components defined in JXS I think the problem would be the same as the doc says:

Keep in mind no <Routes> means the <Router> API is different. The <Router> acts as the <Routes> component and its children can only be <Route> components. Your top-level layout should go in the root prop of the router as shown above

Keep in mind no <Routes> means the <Router> API is different. The <Router> acts as the <Routes> component and its children can only be <Route> components. Your top-level layout should go in the root prop of the router as shown above

My questions is: How can I have a toolbar that isn't re-rendered when the route changes in solid router 0.10.x?

4 Replies

JCM•7mo ago

I might have posted this a bit early as I already found a solution to the question. I need to supply a root property to the <Router> component. For the example above, it looks like this:

function App(props) {
  return (
    <>
      <A class="nav" href="/">
        Home
      </A>
      <A class="nav" href="/users">
        Users
      </A>
      {props.children}
    </>
  );
}

render(
  () => (
    <Router root={App}>
      {routes}
    </Router>
  ),
  document.getElementById("app")
);

function App(props) {
  return (
    <>
      <A class="nav" href="/">
        Home
      </A>
      <A class="nav" href="/users">
        Users
      </A>
      {props.children}
    </>
  );
}

render(
  () => (
    <Router root={App}>
      {routes}
    </Router>
  ),
  document.getElementById("app")
);

aver6219•7mo ago

),
  document.getElementById("app")
);

),
  document.getElementById("app")
);

lowercase app should be App

JCM•7mo ago

Not necessarily. It depends what id was given to the root div in the html page, which isn't visible in the code snippet above. The example was taken from the official router example in the readme, where it uses document.getElementById("app"). In my actual app it's document.getElementById("root").

aver6219•7mo ago

Oh yes, what was I thinking, lol

Gaming

Programming

Avoid re-rendering toolbar in solid router 0.10.x