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>
  );
};

SolidJS•2y ago•

3 replies

ATA noob

Configure Background for routes

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>
  );
};

Configure Background for routes

Similar Threads

Configure Background for routes

Similar Threads

Similar Threads

Similar Threads