Thoughts on a createElectronRouter API to support v6.4 data APIs

[offirgolan]

👋 Hi!

v6.4 of react router introduced data APIs that can only be used via the createBrowserRouter, createHashRouter, and createMemoryRouter.

Thoughts on having this library support a similar wrapper around createHashRouter?

[offirgolan]

Following up on this. This is what I'm currently doing:

import type { FC, ReactNode } from 'react';
import { useMemo } from 'react';
import {
  RouterProvider,
  createHashRouter,
  createRoutesFromChildren,
} from 'react-router-dom';

type Routes = Record<string, ReactNode>;

type AppRouterProps = {
  routes: Routes;
};

function getRouteForCurrentWindow(routes: Routes) {
  const selectAllSlashes = /\//g;
  const windowId = window.location.hash
    .split(selectAllSlashes)?.[1]
    ?.toLowerCase();
  const found = Object.keys(routes).find(
    (key) => key.toLowerCase() === windowId
  );

  return found
    ? {
        basename: `/${windowId}`,
        element: routes[found],
      }
    : null;
}

const AppRouter: FC<AppRouterProps> = ({ routes }) => {
  const router = useMemo(() => {
    const route = getRouteForCurrentWindow(routes);

    return route
      ? createHashRouter(createRoutesFromChildren(route.element), {
          basename: route.basename,
        })
      : null;
  }, [routes]);

  return router ? <RouterProvider router={router} /> : null;
};

export { AppRouter, type AppRouterProps };

[daltonmenezes]

Hi @offirgolan I think I don't quite understand which APIs you are referring to. Could you please talk more about it and include links, so I can take a look? Currently, the way it is, what's the issue using both libs?

[offirgolan]

@daltonmenezes this is documented here

[daltonmenezes]

Thanks, @offirgolan . Have you had the following type issues?

[daltonmenezes]

@offirgolan Ok, the type issue was in v6.4.0, bumping to v6.4.3 solves. 🤔

[daltonmenezes]

@offirgolan using react-router-dom v6.6.0, but we need a electron-router-dom breaking-change to make it work only from that and higher versions. 🤔

output.mp4

[offirgolan]

@daltonmenezes thanks for taking the time to look into this 😄

I think a new major version release for this breaking change makes sense since it will be following react-router-dom's new API recommendations.