Replies: 1 comment 2 replies
-
|
Not sure if I understand you correctly. If you'd add a code example of what you have and would like it might make it easier. Maybe you can pick up ideas from my current setup (simplified and untested): export default function() {
const Main = (props) => {
return (<>
<Header/>
{props.children}
<Footer/>
</>)
}
const Routes = () => <Router root={Main}><Pages/></Router>
render(Routes, document.getElementById("main"))
}The export default function Pages() {
return (<>
<Route path="/" component={Home} />
<Route path="/test" component={Test} />
</>)
}The DOM then would look something like this: <body>
<div id="main">
<header></header>
<div class="home"></div>
<footer></footer>
</div>
</body>Edit: Upon reading you question multiple times I think you mean to adjust e.g. the In that case you could use import { useLocation } from "@solidjs/router"
const location = useLocation()
const pathname = location.pathname |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for your answer. Yes, that's what I meant - you're right that I should have added something more tangible. I was thinking that maybe it can be done in a more data-driven way e.g.: export default function Pages() {
return (<>
<Route path="/" component={Home} rootProps={() => ({color: 'red'})} />
<Route path="/test" component={Test} rootProps={() => ({color: 'blue'})} />
</>)
}Or maybe at least it's possible to access some context in const Header = () => {
const {path} = useSomeContextExposedBySolidRouter();
const color = getColor(path);
return <h2 class={`c-${color}`}>My App</h2>;
}The solution using |
Beta Was this translation helpful? Give feedback.
-
|
Alright I think it is clear. |
Beta Was this translation helpful? Give feedback.
-
Hello,
I am wondering if there is an elegant way to customize the layout component passed as
rootprop toRouterdepending on whichRouteis active.It feels very natural to me that some component (its markup) e.g. header repeats over all pages, but for one attribute, so I may place it in the layout component and access router state/definition to set customizable prop. Still, I don't see a solution for that on current solid-router version.
Thank you in advance
Beta Was this translation helpful? Give feedback.
All reactions