Is RescriptReactRouter a replacement for ReactRouter?

I’m converting a TypeScript project to ReScript and almost done. I used ReactRouter in the TS app and it worked ok. But switching over I thought I would try out RescriptReactRouter since it’s included.

But I’m now experiencing an issue where every push of a new url triggers React.Suspense further up the tree than ReactRouter thus making the UI change too much when I change url.

So I’m unsure if this is because ReactRouter does some magic under the hood or that I’m maybe using RescriptReactRouter in a wrong way. I basically just replaced the places I used ReactRouter 1 to 1.

My app tree looks like this:

...

let url = RescriptReactRouter.useUrl()

<RescriptRelay.Context.Provider environment>
  <Jotai.Provider>
    <React.Suspense fallback={<LoadingScreen1 />}>
      <AppLayout>
        <React.Suspense fallback={<LoadingScreen2 />}>
          {switch (url.path, url.search) {
          | (list{"regulations", id}, search) =>
            <Regulation id provision={getProvisionId(search)} />
          | (list{"group-admin"}, _) => <GroupAdmin />
          | (list{"overview"}, _) => <Overview />
          | (list{}, _) => <Dashboard />
          | _ => <Fejl />
          }}
        </React.Suspense>
      </AppLayout>
    </React.Suspense>
  </Jotai.Provider>
</RescriptRelay.Context.Provider>

An example is that if I change the url inside the switch I will see <LoadingScreen1 /> while I was expecting to see <LoadingScreen 2 />

Any feedback is appreciated :blush:

@zth is working on a router for relay projects, such as mine. So I’m switching over to that since it provides a pretty vast and neat feature set :blush:

3 Likes