SolidJS•5mo ago

How to use a common header with solid-router nested layouts

Hi, If i have a nested layout like bellow what is the best way for routes that share the layout to change the title shown in the shared layout?

function PageWrapper(props) {
  return (
    <div>
      <header><h1>Tittle</h1></header>
      {props.children}
      <A href="/">Back Home</A>
    </div>
  );
}

<Route path="/" component={PageWrapper}> 
    <Route path="/" component={Home} /> // title"You are home"
    <Route path="/order" component={Order} /> // title "Make an order"
    <Route path="/order/:orderId" component={Status} /> // title "Order 123"
</Route>

function PageWrapper(props) {
  return (
    <div>
      <header><h1>Tittle</h1></header>
      {props.children}
      <A href="/">Back Home</A>
    </div>
  );
}

<Route path="/" component={PageWrapper}> 
    <Route path="/" component={Home} /> // title"You are home"
    <Route path="/order" component={Order} /> // title "Make an order"
    <Route path="/order/:orderId" component={Status} /> // title "Order 123"
</Route>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

How to use a common header with solid-router nested layouts