How to label each page with a title?

This may seem a trivial thing – and maybe it is – but please bear with me (as I have very little experience with Solid yet).
I have a Solid app. It has a

routes.tsx

routes.tsx

routes.tsx

routes.tsx file which defines

routes

routes

routes

routes – a nested array of

RouteDefinition

RouteDefinition

RouteDefinition

RouteDefinition. Then I have this:

render(() => (
    <Router root={Layout}>
        {routes}
    </Router>
), document.getElementById('app')!);

render(() => (
    <Router root={Layout}>
        {routes}
    </Router>
), document.getElementById('app')!);

render(() => (
    <Router root={Layout}>
        {routes}
    </Router>
), document.getElementById('app')!);

render(() => (
    <Router root={Layout}>
        {routes}
    </Router>
), document.getElementById('app')!);

Not surprisingly, the

Layout

Layout

Layout

Layout component has a

Header

Header

Header

Header component, which renders a title.
Now, here is a question: what is a canonical/best/sensible way for any of the components in

routes

routes

routes

routes to tell

Header

Header

Header

Header in

Layout

Layout

Layout

Layout what the title of the current "screen" is? Related question: I'd also like the

<title>

<title>

<title>

<title> tag to be dynamically set depending on the current "screen" (possibly to the same value as the one in the header). How to achieve that?

How to label each page with a title?

Similar Threads

Similar Threads

Similar Threads