JCM Posts - Answer Overflow

JCM

•Created by JCM on 12/19/2023 in #support

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?

5 replies

SSolidJS

•Created by JCM on 12/4/2023 in #support

`reconcile` object to array mutation

I have a data structure coming as JSON from the server that is put in a store. When a new state from server comes, reconcile is used to update the store in order to keep fine grained updates. So far so good, however reconcile doesn't do the expected thing when I have an object in the old state, which needs to be an array in the new state. Here is minimal reproducible example: https://playground.solidjs.com/anonymous/ab7db9d8-47b6-4fd7-8f0b-fda541030b92 Is there a way to fix this behaviour with the existing reconcile. Should I report a bug?

3 replies

Gaming

Programming