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

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>