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. 🤔

https://user-images.githubusercontent.com/1149845/209368713-6914ee48-4707-4baf-87d3-834f6f516dd0.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.

[galetahub]

@daltonmenezes thanks for your work! Do you have any plans to support react-router-dom 6.x?

[daltonmenezes]

@galetahub soon, I'm finishing the new version of opendocs, after that I can return to electron-router-dom development

[daltonmenezes]

@galetahub @offirgolan

The initial decisions I made for v2.0:

• simplify the api, electron-router-dom will only export the Router from react-router-dom, the Route and anything else from react-router-dom will need to be imported from it and no longer from electron-router-dom. I believe this will bring less confusion!
• I added the optional _providerProps property, so that you can override the internal RouterProvider props
• minimum versions required:
  • react: >=18.0
  • react-router-dom >=6.22.3

what do you think?

[daltonmenezes]

@galetahub @offirgolan how about this one?

• typed route ids
• id values inference on createRoute function and Router component
• simplification of route creation on main process

https://github.com/user-attachments/assets/e6065699-e24a-4da9-bc24-f41015fcdd77

[daltonmenezes]

@galetahub @offirgolan v2 release planned for this week! Currently working on site, docs and migration guide!

[daltonmenezes]

@galetahub @offirgolan v2 released now! 🎉