How to have a default layout for all routes?

I am using @solidjs/router and I want to have a default layout to have a default background color. How do I do that?

23 Replies

pronoobOP•2y ago

Code:

render(
  () => (
    <Router>
      <Routes>
        <Route path="/" component={Index} />
        <Route path="/help" component={Help} />
      </Routes>
    </Router>
  ),
  root!
);

render(
  () => (
    <Router>
      <Routes>
        <Route path="/" component={Index} />
        <Route path="/help" component={Help} />
      </Routes>
    </Router>
  ),
  root!
);

Grahf•2y ago

In my project I have index.jsx like this:

render(
  () => (
    <Router>
        <App />
    </Router>
  ),
  document.getElementById('root')
)

render(
  () => (
    <Router>
        <App />
    </Router>
  ),
  document.getElementById('root')
)

Then in App.jsx

  return (
    <div

      class='bg-red-500'
    >
      <Nav />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/someplace/:param1/:param2' element={<SomeComp />} />
        <Route path='/*' element={<Navigate href='/' />} />
      </Routes>
    </div>
  )

  return (
    <div

      class='bg-red-500'
    >
      <Nav />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/someplace/:param1/:param2' element={<SomeComp />} />
        <Route path='/*' element={<Navigate href='/' />} />
      </Routes>
    </div>
  )

mdynnl•2y ago

this simply works. if you need a more robust approach, see nested routes https://github.com/solidjs/solid-router#nested-routes

Grahf•2y ago

pronoobOP•2y ago

Thank you so much! ❤️ Robust? How is using nested route better? Can you give an example? I just cannot seem to get them to work This is what I tried:

<Router>
  <Route path="/" component={Layout}>
    ...
  </Route>
<Router />

<Router>
  <Route path="/" component={Layout}>
    ...
  </Route>
<Router />

For some reason, hot reload does not work with this approach properly, you have to manually refresh to see changes

mdynnl•2y ago

say if some routes are public and some private like auth

<Route path="/auth" component={() => <div>auth: <Outlet/></div>}>
  <Route path="/foo" element="foo" />
</Route>
<Route path="/" component={() => <div>public: <Outlet/></div>}>
  <Route path="/bar" element="bar" />
</Route>

<Route path="/auth" component={() => <div>auth: <Outlet/></div>}>
  <Route path="/foo" element="foo" />
</Route>
<Route path="/" component={() => <div>public: <Outlet/></div>}>
  <Route path="/bar" element="bar" />
</Route>

pronoobOP•2y ago

<Router>
      <Routes>
        <Route
          path="/"
          component={() => (
            <div class="bg-sky-500 h-screen">
              <Outlet></Outlet>
            </div>
          )}
        >
          <Route path="/login" component={Login} />
        </Route>
      </Routes>
    </Router>

<Router>
      <Routes>
        <Route
          path="/"
          component={() => (
            <div class="bg-sky-500 h-screen">
              <Outlet></Outlet>
            </div>
          )}
        >
          <Route path="/login" component={Login} />
        </Route>
      </Routes>
    </Router>

This does not work at all ^ It only works for the /login route (shows bg-sky-500 with h-screen) But not for the / route

mdynnl•2y ago

nested routes need a leaf child route to render a route with empty path would do for top level site layout i'd go with what @Grahf posted, then use nested routes for auth etc

pronoobOP•2y ago

But hot reload does not work with @Grahf's solution for some reason

mdynnl•2y ago

doe hmr work in other places?

pronoobOP•2y ago

If I remove the top-level layout, it works fine

<Router>
      <div class="bg-sky-500 h-screen">
        <Routes>
          <Route path="/" component={Root} />
          <Route path="/login" component={Login} />
        </Routes>
      </div>
    </Router>

<Router>
      <div class="bg-sky-500 h-screen">
        <Routes>
          <Route path="/" component={Root} />
          <Route path="/login" component={Login} />
        </Routes>
      </div>
    </Router>

The page is not reloaded automatically

mdynnl•2y ago

hmm, could you move the div out the Router component?

pronoobOP•2y ago

Nope, still does not work I have switched so many libraries and frameworks because of this issue, Svelte seems to do it perfectly, but I hate few things about it, I would appreciate it if someone can help me

mdynnl•2y ago

i'll try to repro it locally fyi hmr for context is still wip i think

pronoobOP•2y ago

Tysm! Please mention me if you find anything

mdynnl•2y ago

@pronoob0 seems to be working for me, what's your setup exactly

pronoobOP•2y ago

I am on a mac and I used degit typescript template (manually installed tailwind)

mdynnl•2y ago

hmm, on a mac as well, and took the same step as and still working fine for me, i don't mind a couple refresh though so our expectations might differ the only thing that stands out to me is duplicate mounting on index.tsx even though @refresh reload pragma exists https://codesandbox.io/p/github/mdynnl/solid-ts

pronoobOP•2y ago

I am not importing tailwind.css file, is that a problem? I am just using the @tailwind directives instead and importing the index.css file Also, I am directly passing the router to render(), I don't think that's a problem:

render(
  () => (
    <Router>
      <div class="bg-pink-500 h-screen">
        <Routes>
          <Route path="/" component={Root} />
          <Route path="/login" component={Login} />
        </Routes>
      </div>
    </Router>
  ),
  root!
);

render(
  () => (
    <Router>
      <div class="bg-pink-500 h-screen">
        <Routes>
          <Route path="/" component={Root} />
          <Route path="/login" component={Login} />
        </Routes>
      </div>
    </Router>
  ),
  root!
);

I have to manually refresh the browser to see changes for top-level layout, that's the only problem I am having right now I am just gonna give up on SolidJS for now, unfortunately What do you recommend as an alternative? I am thinking of Preact or something

mdynnl•2y ago

not really sure but render() needs to be a separate file as it's necessary to reload the whole page

pronoobOP•2y ago

If that's the reason why it wasn't working, that would be the stupidest thing the docs re ommend

mdynnl•2y ago

probably because it was written long before hmr is implemented and hasn't updated ever since

pronoobOP•2y ago

It worked! Thank you so much for saving so much of my time!

Gaming

Programming

How to have a default layout for all routes?