quisido / use-react-router Goto Github PK

Hi @CharlesStover 👋

I think this package has been causing some problems with people who are using React Router and getting 2 different copies of our context object. The problem is that you depend on react-router, so you have one instance of our __RouterContext object. But react-router-dom and react-router-native also depend on react-router, so if the 2 copies don't match up exactly then people end up using a different instance of context which breaks things.

It's hard to reproduce this behavior because package managers vary in how they decide to hoist dependencies and deduplicate them. But we've seen a few issues crop up in the main router repo that seem to indicate we have an ecosystem problem (see remix-run/react-router#6755).

The solution is that you should never depend on react-router directly. Instead, you should depend on react-router-dom or react-router-native, depending on which platform you're targeting.

But there's also some good news, and that is that we shipped some hooks yesterday in v5.1, so people shouldn't need use-react-router anymore. So an even simpler solution would be to deprecate this package with a notice message that encourages people to use v5.1 instead. This would also be ideal for us since we never intended 3rd party libs to use our context object (hence the __ prefix).

Thanks!

using react-router work, but wiht user-react-router does not work.

// if there is no 'personId' in query string than set '1' - ?personId=1
const urlParams = new URLSearchParams(location.search)
const selectedPersonId = urlParams.get('personId')

if (!selectedPersonId) {
urlParams.set('personId', '1')
history.push({ search: ?${urlParams} })
}

React Router lib has builtin hooks now. There is a blog post which details the future of the API.

Hi!
That would be really nice to know how to use that component!
That would be really nice to have some explanation in readme, showcasing the basic routes/navigating etc.
Would really appreciate that.

The @types/react-router was updated to match the latest react-router release 5.0.0.
Since that the following line of code is broken.

const routerContext: RouteComponentProps<T> = useContext(__RouterContext);

Error message:

const routerContext: RouteComponentProps<T, StaticContext, any>
Type 'RouteComponentProps<{}, StaticContext, any>' is not assignable to type 'RouteComponentProps<T, StaticContext, any>'.
  Type '{}' is not assignable to type 'T'.ts

With the 16.8 alpha, I'm getting the following error when using const router = useReactRouter(); in a component:

TypeError: Context is undefined

react-router is version 4.3.1.

(I've made sure that only 16.8 is present in my yarn.lock)

Hello, thanks for the nice package!

I've just stumbled upon the problem when my component, that using useReactRouter hook cannot be tested, I'm getting an error:

useReactRouter may only be called within a <Router /> context.

For the test environment, we're using <MemoryRouter />, and apparently useReactRouter doesn't work with its context yet.

TL;DR would be nice to add support of MemoryRouter's context for tests

Getting this error in the console even though I've confirmed I have react-router 5 and react-router-dom 5 installed. Any ideas why this might be happening?

O.K., this is not an issue, actually. This is just a personal thank you for those who contributed for this hook, specially @CharlesStover which authored it.

To give you some context: we're already using hooks at the app I'm working on, and 'been facing some headaches because of withRouter. 1) I don't like the HOC design; 2) typing withRouter was quite a pain. So your library saved me a few stressful minutes (maybe hour(s)) of work.

Would love to make a donation so you, the author, could drink a beer on me!

Last but not least, have a great day!

After updating to react-router-dom to 5.0.1 from 5.0.0 I am getting this error.

bundle.js:70 Error: useReactRouter may only be called within a <Router /> context.
    at Object.<anonymous> (bundle.js:1)
    at r (bundle.js:1)
    at Module.<anonymous> (bundle.js:97)
    at r (bundle.js:1)
    at Object.<anonymous> (bundle.js:54)
    at r (bundle.js:1)
    at bundle.js:1
    at bundle.js:1

I already have react-router-dom v5.0.0. I just added react-router v5.0.0 and "use-react-router" v1.0.5 to my current project. The project now fails immediately with this:

Failed to compile
./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js
Error: ENOENT: no such file or directory, open 'C:\Users\Bruce\Dropbox\Projects\AcesTESTER\node_modules\hoist-non-react-statics\dist\hoist-non-react-statics.cjs.js'

Any ideas?

Declaration has to be listed in package.json's types section: https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html

Like so:

{
  "main": "use-react-router.js",
  "types": "use-react-router.d.ts"
}

When testing one of my components that uses the useReactRouter hook, I got the following error:

Cannot destructure property `history` of 'undefined' or 'null'.

      19 |   active
      20 | }) => {
    > 21 |   const { history } = useReactRouter();
         |                                     ^
      22 |
      23 |   const classes = active
      24 |     ? 'slider__item slider__item--active'

The error itself is a bit ambiguous as it originates from the hook not being able to find the React-Router context. Perhaps a nice addition would be to warn/error on not being able to find the React-Router context.

The following code works for me.
It could be an enhancement?

import { useContext } from 'react';

// @ts-ignore
import { __RouterContext, RouteComponentProps } from 'react-router';

export default () => useContext<RouteComponentProps>(__RouterContext);

Running

console.log(match.params);

returns this

but this happens when I try to use typescript

How to fix it?

./node_modules/use-force-update/use-force-update.js
(Emitted value instead of an instance of Error) Cannot find SourceMap 'use-force-update.js.map': Error: Can't resolve './use-force-update.js.map' in '/home/ms/git/geesys/webclient/node_modules/use-force-update'
./node_modules/use-react-router/use-react-router.js
(Emitted value instead of an instance of Error) Cannot find source file 'src/use-react-router.ts': Error: Can't resolve './src/use-react-router.ts' in '/home/ms/git/geesys/webclient/node_modules/use-react-router'

"react-router": "^4.4.0-beta.7",
"react-router-dom": "^4.4.0-beta.7",
"use-force-update": "^1.0.3",
"use-react-router": "^1.0.3"

Just giving you a heads up that you probably want to pin all your dependencies (peer or not) of react-router to "5.0.0" exactly.

There is a open PR to rename the __RouterContext export. But it's a good idea to fix the version anyway, because the context isn't part of the public API. You should check compatibility with RR manually for each new release.