S
SolidJS•2y ago
ATA noob

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
jer3m01•2y 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 noob
ATA noobOP•2y ago
I'll use this. Thank you so much.
peerreynders
peerreynders•2y 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

Did you find this page helpful?