SolidJS•8mo ago

Configure Background for routes

I have a solid app where I want to change my background images dynamically based on which route/page it is. How can I configure bg1.png to automatically change based on which route is used. Should i create a global backgroundSignal, then use the Route."load" property to set the backgroundSignal to the current background. Then put the img in a switch to update when backgroundSignal changes?

const PageLayout = (props: any) => {
  return (
    <>
      <NavbarContainer />
       <img src="bg1.png"> // Should be Bg2.png for 2nd page, etc.
      <main>{props.children}</main>
    </>
  );
};

export const App = () => {
  return (
    <FirebaseProvider>
      <Router root={PageLayout}>
        <For each={PageLinkMap}>
          {(it) => <Route path={it.pageUrl} component={it.pageComponent} />}
        </For>
      </Router>
    </FirebaseProvider>
  );
};

const PageLayout = (props: any) => {
  return (
    <>
      <NavbarContainer />
       <img src="bg1.png"> // Should be Bg2.png for 2nd page, etc.
      <main>{props.children}</main>
    </>
  );
};

export const App = () => {
  return (
    <FirebaseProvider>
      <Router root={PageLayout}>
        <For each={PageLinkMap}>
          {(it) => <Route path={it.pageUrl} component={it.pageComponent} />}
        </For>
      </Router>
    </FirebaseProvider>
  );
};

3 Replies

jer3m01•8mo ago

You can use https://docs.solidjs.com/solid-router/reference/primitives/use-location to get the current path reactively Then in your image src={pathname() === "about" ? "bg2.png" : "bg1.png"}

ATA noobOP•8mo ago

I'll use this. Thank you so much.

peerreynders•8mo ago

TL;DR: the props passed to PageLayout already has the location object. Context-free background; If you look at:

// from examples/basic/src/app.tsx

export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

// from examples/basic/src/app.tsx

export default function App() {
  return (
    <Router
      root={props => (
        <MetaProvider>
          <Title>SolidStart - Basic</Title>
          <a href="/">Index</a>
          <a href="/about">About</a>
          <Suspense>{props.children}</Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

What is passed to root is the component that controls the common page layout across all routes. That props argument is a RouteSectionProps which already provides the reactive Location object via props.location. If you are trying to vary the background image on the layout rather than the route components themselves then that root/layout component is the place to do it.

GitHub

solid-router/src/types.ts at 3cd2fef67fe0b4d8bb3178923be32d541d56ec...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

Gaming

Programming

Configure Background for routes