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

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

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>

<Router>

, but I loose the toolbar. If I would switch to

<Route>

<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?

SolidJS•3y ago•

4 replies

JCM

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

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

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>

<Router>

, but I loose the toolbar. If I would switch to

<Route>

<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?

Avoid re-rendering toolbar in solid router 0.10.x

Similar Threads

Avoid re-rendering toolbar in solid router 0.10.x

Similar Threads

Similar Threads

Similar Threads