SolidJS•5d ago

SolidStart clientside routing issue

My main issue (Solved) I have an app setup with a (root).tsx layout, then my pages all in the corresponding (root) directory under routes. My Layout shows up fine, but when I try to change pages it gets stuck on the same page. Also, when I click to a different route nothing works on that page. Routes only work by directly visiting the URL. Any help to resolve this issue would be greatly appreciated. More on this project: My project is loosely based on a few examples including DBEST stack, tRPC, tailwind (with flowbite), and auth-unstorage. This is a pretty cool project that does some neat things, worth checking out regardless. I've written a little bit about my thinking behind the auth system on my blog at brooksdubois.com but I've drifted away from that alot here and decided to start from scratch with a new project from the tRPC template. The project is located here: https://github.com/brooksdubois/SolidStart-tRPC-Auth Running the project To get it to run, you'll need to source the env file and run docker compose up, then also source the env in a new terminal tab and run bunx drizzle-kit push to run the migrations. Then you should be able to do bun run dev and see a todo app that works live with sockets, a counter page, and an attempt at an auth page. In conclusion My goal here is to eventually provide protected routes and better understand how this works with websockets, but I've been stuck on this client side routing issue. I'm not sure what I'm doing wrong and I'm finding the documentation a little bit obtuse to leading me to correct the problem. GPT has given me alot of help so far but nothing with this issue. Any help or just general thoughts on what I'm doing here is very greatly appreciated.

GitHub

GitHub - brooksdubois/SolidStart-tRPC-Auth: An example of using tRP...

An example of using tRPC with a JWT based auth system - brooksdubois/SolidStart-tRPC-Auth

4 Replies

duckstape•5d ago

I've come to find, that a root layout with (root).tsx does not work for me either. Try instead to use the Layout component in your app.tsx in the root prop of <Router/> (where you have <Suspense>{props.children}</Suspense>) . I think this is because the <FileRoutes/> is inside the the <Router/>, so logically the file router does not have access to the root prop of the Router.

InternationallyRankedOP•5d ago

That was actually my first instinct, to wrap it like this:

export default function App() {
  return (
    <Router
      root={props => (
          <Layout>
            <MetaProvider>
              <Title>SolidStart</Title>
              <Suspense>
                {props.children}
              </Suspense>
            </MetaProvider>
          </Layout>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

export default function App() {
  return (
    <Router
      root={props => (
          <Layout>
            <MetaProvider>
              <Title>SolidStart</Title>
              <Suspense>
                {props.children}
              </Suspense>
            </MetaProvider>
          </Layout>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

But it didn't work either which is why I modeled it after the auth-unstorage project with (root).tsx The way I did. I actually had this commented out in there just to show I had already tried it. I think I've somehow broken the clientside router and I cant figure out what's causing it. Actually I just discovered that strangely enough if you go to the users page first and navigate to any other page it actually works. Further navigation doesn't work. Oh, I just figured out another piece of the puzzle. If I comment out my getClient() tRPC code and I just use it without establishing a socket anywhere then the routing works fine. Is this potentially broken? Or some kind of limitation?

duckstape•5d ago

if you look into the console, the unsubscribeAll function throws an error and breaks navigation. If you comment out the onCleanup function in all routes, the navigation works again

InternationallyRankedOP•5d ago

Yes, this solves it! Thank you so much. I was trying to be fancy with an unsubscribeAll function🤦‍♂️. Just moving it to a closure works fine. Nice.

Gaming

Programming

SolidStart clientside routing issue

Did you find this page helpful?