support

How to have a default layout for all routes?

Ppronoob

7/3/2023

I am using @solidjs/router and I want to have a default layout to have a default background color. How do I do that? 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!
);

GGrahf

7/3/2023

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>
  )

Mmdynnl

7/4/2023

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

GGrahf

7/4/2023

Ppronoob

7/4/2023

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

Mmdynnl

7/4/2023

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>

Ppronoob

7/4/2023

<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

Mmdynnl

7/4/2023

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

Ppronoob

7/4/2023

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

Mmdynnl

7/4/2023

doe hmr work in other places?

Ppronoob

7/4/2023

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

Mmdynnl

7/4/2023

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

Ppronoob

7/4/2023

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

Mmdynnl

7/4/2023

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

Ppronoob

7/4/2023

Tysm! Please mention me if you find anything

Mmdynnl

7/4/2023

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

Ppronoob

7/4/2023

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

Mmdynnl

7/4/2023

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

Ppronoob

7/4/2023

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

Mmdynnl

7/5/2023

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

Ppronoob

7/5/2023

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

Mmdynnl

7/5/2023

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

Ppronoob

7/6/2023

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