search

grommet / grommet

a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package
https://grommet.io
Apache License 2.0
8.35k stars 1.03k forks source link

RoutedAnchor not working with "react-router-dom" version 4.4.0 #2652

Closed shai32 closed 5 years ago

shai32 commented 5 years ago

Expected Behavior

should support react-router 4.4.0 version

Actual Behavior

RoutedAnchor not working with "react-router-dom" version 4.4.0 using it, will print an error on console Failed context type: The context router is marked as required in RoutedAnchor, but its value is undefined

URL, screen shot, or Codepen exhibiting the issue

look at react route changelog https://github.com/ReactTraining/react-router/releases/tag/v4.4.0-beta.0 image

Steps to Reproduce

  1. Use "react-router-dom": "next",
  2. create an app with RoutedAnchor
  3. run the app and you will see the error on console image

Your Environment

oorestisime commented 5 years ago

can you share how you use RoutedAnchor? From what i understand from the documentation It seems you need to wrap it withRouter?

shai32 commented 5 years ago

I didn't wrap it with withRouter, but I didn't have to in react-router v3.3 If we need to warp it with withRouter, its not really usable

oorestisime commented 5 years ago

can you probably set up a codesandbox reproducing the problem?

shai32 commented 5 years ago

@oorestisime wrapping it with withRouter, doesn't fix the problem.

oorestisime commented 5 years ago

would you be able to share a codesandbox with the problem or a repo? i don't have any projects with react-router (personally using router5) so it will be much easier to debug.

shai32 commented 5 years ago

@oorestisime of course, here is the codesandbox: https://codesandbox.io/s/930z3kjx8y

shai32 commented 5 years ago

image

oorestisime commented 5 years ago

So i as i understand from their changelog they don't allow any more the this.context.router. I updated the codesandbox https://codesandbox.io/s/l5ov5y4269 to show what they expect. You need to wrap components withRouter so you get access to the history, location and match props.

As i see it RoutedAnchor is router agnostic right now so i am not sure it makes any sense form grommet to wrap it internally in the library (it will need to depend on react-router-dom). Plus this is a fairly undocumented component.

Maybe @ericsoderberghp can shred some light on how this is supposed to work.

ShimiSun commented 5 years ago

Since we will be deprecating RoutedButton and RoutedAnchor, we won't be attempting to address this issue. (see #2855)