SolidJS•16mo ago

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

pronoob•16mo 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•16mo 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•16mo ago

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

Grahf•16mo ago

pronoob•16mo 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•16mo 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>

pronoob•16mo 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•16mo 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

pronoob•16mo ago

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

mdynnl•16mo ago

doe hmr work in other places?

pronoob•16mo 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•16mo ago

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

pronoob•16mo 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•16mo ago

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

pronoob•16mo ago

Tysm! Please mention me if you find anything

mdynnl•16mo ago

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

pronoob•16mo ago

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

mdynnl•16mo 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

pronoob•16mo 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•16mo ago

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

pronoob•16mo ago

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

mdynnl•16mo ago

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

pronoob•16mo 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?