react-router-dom v6 support?

[d9k]

✘ [ERROR] No matching export in "node_modules/react-router-dom/index.js" for import "useRouteMatch"

    node_modules/use-route-as-state/dist/index.es.js:2:22:
      2 │ import { useLocation, useRouteMatch, useHistory, generatePath } from 'react-r..$
        ╵                       ~~~~~~~~~~~~~

✘ [ERROR] No matching export in "node_modules/react-router-dom/index.js" for import "useHistory"

    node_modules/use-route-as-state/dist/index.es.js:2:37:

https://reactrouter.com/docs/en/v6/upgrading/v5

[d9k]

useHistory -> useNavigate
useRouteMatch -> useMatch

[baruchiro]

Thanks, you're welcome to suggest a PR for it!

I will try to take it soon.

[d9k]

https://github.com/pbeshai/use-query-params/ solved react router v6 compatibilty

see:
https://github.com/pbeshai/use-query-params/blob/master/examples/react-router-6/src/index.js
pbeshai/use-query-params#196 (comment)

[ramirez]

useRouteMatch -> useMatch

useMatch() expects a parameter, whereas in use-route-as-state, useRouteMatch() is called with no parameters, so it is not a direct replacement.

[baruchiro]

I need some help here.

If there are breaking changes in react-router-dom, how can I support both v5 and v6 in my library? Do I need to create a separate branch and versions for that?

[s-roueche]

Hi @baruchiro

In my opinion, you shouldn't support V5 and V6 in same time in your library.

Create a new major version of you library who indicate that react-router v5 it's doesn't support anymore.
If someone want to use react-router V5, it can use the previous major version of your library.

[baruchiro]

Hi @s-roueche, thanks!

I think it means that I have two options. One is to stop supporting V5, and the other one is to maintain two branches.

Since V6 is still not stable and since the migration is a big issue, I think I need to choose option two.

WDYT?

[SRloreal]

If you take a look to the historical version of react-router-dom, you can see they don't work a lot on version V5 anymore.

You can still create two branches, I think you won't have a lot of work to do for the version 5 in the futur.

About the version 6, you can see now on npm, that the version 6 is almost 3 times more downloaded than the version 5.
In my opinion, migrate to the version 6 it's a good option 👍

[SRloreal]

If you want I started to implement the migration to v6 on a personal branch.

There are just 4 tests failed.... I don't really understand how to fixe it 😓

If you want I can push it on your repo ?

[baruchiro]

Yes, sure! Thank you, I will be happy to see your branch.

I also did some local work for the upgrade, and also failed on tests, you can see it here: #176.

[s-roueche]

I wasn't able to push my branch on your repo because I don't have the permission.

Can you give me the permission to do it ?

my username is @s-roueche

[baruchiro]

You should push your fork and open a PR.

Use gh pr create with the Github CLI.

[s-roueche]

It's done.

[jschwindt]

I wrote my own package to handle state using search params with react-router-dom-v6: https://github.com/jschwindt/react-use-search-params-state

[baruchiro]

I wrote my own package to handle state using search params with react-router-dom-v6: https://github.com/jschwindt/react-use-search-params-state

@jschwindt Why not implement it here?

[jschwindt]

I wrote my own package to handle state using search params with react-router-dom-v6: https://github.com/jschwindt/react-use-search-params-state

@jschwindt Why not implement it here?

I extracted it from an app that I was working on, and the usage is slightly different. I commented here just in case it is useful for somebody else.

[ramirez]

Will there be a version compatible with v6 or will this be staying with v5?

[baruchiro]

I will deprecate this package.