Warning when used with react-router-dom

[heraldb]

Hi!

Thanks for this module! Maybe you can comment on this:

The warning I see is:

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (at index.js:14)

relevant source code

ReactDOM.render(
  <CookiesProvider>
    <Router>
      <div>
-->        <Route path='/veiling' component={App} />
      </div>
    </Router>
  </CookiesProvider>
  , document.getElementById('root')

Reason is that "App" is of type function, while "withCookies(App)" is of type Object. And as suggested in the example code, I exported the App using withCookies, so indeed an Object is exported instead of a function.

I seems to work however, but it feels not OK. What would you recommend?

[eXon]

Hi @heraldb

Thanks for taking the time to report this! It seems like react-router has a typing problem when using React.forwardRef on the component prop. withCookies is using it so that you can set the ref on your component and not the HOC.

It seems like the workaround until they fix the bug is to do this:

<Route path='/veiling' render={() => <App />} />

You can follow the issue there: remix-run/react-router#6056

[heraldb]

Thanks for your quick response!
I tried the fix you suggested. Although it seems to make sense, the result is this error:

The above error occurred in the <App> component:
    in App
    in withCookies(App) (created by ForwardRef)
    in Route (at index.js:14)
    in div (at index.js:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at index.js:12)
    in CookiesProvider (at index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

For now I switched to react-cookies (with the "s") which works fine. So, no pressure.

[eXon]

You might be missing a prop that <Route component /> is automatically passing. It seems to be an error within your code.

Otherwise you can just ignore the warning and keep using the component prop.

[eXon]

@heraldb The warning should be fixed as soon as this PR is merged: remix-run/react-router#6327

[heraldb]

Thanks for the quick fix!

[mjackson]

Just FYI: this was fixed in remix-run/react-router#6417 and is now available in the React Router 4.4 beta.

[ntmcminn]

I had the exact problem and message described in the opening comment on this issue, and upgrading to React Router 4.4. beta 6 has corrected it. Thank you!