S
SolidJS•3mo ago
Sussy

Problem with SolidJS router

Hello, I'm currently making a web application and I can't seem to get this right. I'm trying to create a router hierarchy with a page wrapper containing a navbar, but somehow only my navbar is being rendered, my homepage (or any other pages when I click on them, even if they're just divs with text in this case) isn't. Main.tsx: 
import { Router, Route } from '@solidjs/router';
import { createSignal } from 'solid-js';

import PageWrapper from '../components/PageWrapper';

import Home from './Home';

export default function App() {
  const [showNavbar, setShowNavbar] = createSignal(true);

    return (
      <Router>
          <Route path="/" component={() => <PageWrapper showNavbar={showNavbar}/>}>
            <Route path="/" component={() => <Home setShowNavbar={setShowNavbar} />}/>
            <Route path="/about" component={() => <div>Über uns</div>} />
            <Route path="/contact" component={() => <div>Kontakt</div>} />
            <Route path="/download" component={() => <div class="text-black">Download</div>} />
          </Route>
      </Router>
    )
}
import { Router, Route } from '@solidjs/router';
import { createSignal } from 'solid-js';

import PageWrapper from '../components/PageWrapper';

import Home from './Home';

export default function App() {
  const [showNavbar, setShowNavbar] = createSignal(true);

    return (
      <Router>
          <Route path="/" component={() => <PageWrapper showNavbar={showNavbar}/>}>
            <Route path="/" component={() => <Home setShowNavbar={setShowNavbar} />}/>
            <Route path="/about" component={() => <div>Über uns</div>} />
            <Route path="/contact" component={() => <div>Kontakt</div>} />
            <Route path="/download" component={() => <div class="text-black">Download</div>} />
          </Route>
      </Router>
    )
}
2 Replies
Brendonovich
Brendonovich•3mo ago
Each route component receives the elements below it as a children prop, you need to pass it through: 
<Route path="/" component={(props) => 
  <PageWrapper showNavbar={showNavbar}>
    {props.children}
  </PageWrapper>}
/>
<Route path="/" component={(props) => 
  <PageWrapper showNavbar={showNavbar}>
    {props.children}
  </PageWrapper>}
/>
Sussy
SussyOP•3mo ago
thank you bro, i have been looking for an answer for days

Did you find this page helpful?