Support for react-router 6.4.0

[voodoocreation]

Hey team - was just wondering if there's any planned support for react-router v6.4.0?

After attempting to migrate to their newer method of wiring up routes, it appears it requires a whole new provider to be used, which doesn't seem to require creating the history instance to provide it - I'm assuming it now does it internally. Not too sure what changes would be required within redux-first-router to support this new way of wiring up the router, but at present due to the internal abstraction of history within react-router's new API it doesn't seem to be possible to integrate it with redux-first-history.

Any updates on this would be greatly appreciated 🙏

[salvoravida]

wip

[salvoravida]

@voodoocreation it seems working https://codesandbox.io/s/redux-first-history-demo-rr6-forked-8ihzv6?file=/src/App.jsx

Am I missing something?

[voodoocreation]

Hey @salvoravida - yeah the old API still works in >=6.4.0 - it was their newer API using the create...Router methods rather than creating a history instance and passing it down which doesn't seem possible at present. Some more info about that can be found in their docs. For example, using const router = createBrowserRouter(); and then providing router to their RouterProvider component (which is the new way of doing things, which doesn't support history being provided - presumably because the create...Router functions are doing that internally).

Using this newer API is what enables the other new features of [email protected] such as loaders, actions and fetchers.

It's possible to just use the older API and not make use of these new features (which is what I'm currently having to do) but it would be good to provide some tooling that works with their new API as well to be feature-complete (plus I'm not sure what the future of react-router looks like, but it would be very unfortunate if they drop support for the old API in the future).

[voodoocreation]

You might have to look at the internals of those new methods to see how it's integrating with the history events to see what you'll need to bind to to get the Redux integration working. Fingers crossed it's still possible and isn't something they've obfuscated within those new methods 🤞

[bobsilverberg]

@voodoocreation it seems working https://codesandbox.io/s/redux-first-history-demo-rr6-forked-8ihzv6?file=/src/App.jsx

Am I missing something?

I am trying this now with react-router-dom v6.4.2, and I'm getting an error from the react-router code after clicking on a Link. I am doing SSR, which might be contributing to it, but up to this point that wasn't an issue. The initial page renders fine, but when I click on a link on the client, I am getting TypeError: locationProp is undefined, which is coming from https://github.com/remix-run/react-router/blob/892238bee052177e78012167c088290b06400206/packages/react-router/lib/components.tsx#L315-L321.

I have tried debugging this and I cannot figure out why location is fine, and defined, at that point when the page is initially rendered on the server, but after clicking a link on the client, location is no longer defined. It seems like when the @@router/LOCATION_CHANGE action is dispatched, the Router itself rerenders, and at that point location is undefined.

If anyone has any insight into what might be happening here, it would be appreciated.

[mogsdad]

I had a config working with [email protected] and just broke with 6.4.3. The TypeScript errors point pretty clearly to a change that added a new encodeLocation property to History in @remix-run/router as a "patch". This divergence presents another challenge for supporting react-router 6.4.

    src/app/components/inputs/__tests__/nav-link.test.tsx:55:20 - error TS2741: Property 'encodeLocation' is missing in type 'History & { listenObject: boolean; }' but required in type 'History'.

    55     <HistoryRouter history={history}>
                          ~~~~~~~

      node_modules/@remix-run/router/dist/history.d.ts:116:5
        116     encodeLocation(location: Location): Location;
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        'encodeLocation' is declared here.
      node_modules/react-router-dom/dist/index.d.ts:51:5
        51     history: History;
               ~~~~~~~
        The expected type comes from property 'history' which is declared here on type 'IntrinsicAttributes & HistoryRouterProps'

[mashood05]

I had a config working with [email protected] and just broke with 6.4.3. The TypeScript errors point pretty clearly to a change that added a new encodeLocation property to History in @remix-run/router as a "patch". This divergence presents another challenge for supporting react-router 6.4.

    src/app/components/inputs/__tests__/nav-link.test.tsx:55:20 - error TS2741: Property 'encodeLocation' is missing in type 'History & { listenObject: boolean; }' but required in type 'History'.

    55     <HistoryRouter history={history}>
                          ~~~~~~~

      node_modules/@remix-run/router/dist/history.d.ts:116:5
        116     encodeLocation(location: Location): Location;
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        'encodeLocation' is declared here.
      node_modules/react-router-dom/dist/index.d.ts:51:5
        51     history: History;
               ~~~~~~~
        The expected type comes from property 'history' which is declared here on type 'IntrinsicAttributes & HistoryRouterProps'

Hi, are u able to find any solution for this thank u