[React.memo] Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function

[Albert-Gao]

  "dependencies": {
    "react": "^16.7.0-alpha1",
    "react-dom": "^16.7.0-alpha1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1"
  },

How to reproduce:

1. create-react-app try
2. edit the App.js to the following:

import React, {memo} from "react";

import { BrowserRouter, Route } from "react-router-dom";

const Test = memo(() => <div>Quick Test</div>);

function App() {
  return (
    <BrowserRouter>
      <Route path="*" component={Test} />
    </BrowserRouter>
  );
}

export default App;

3. yarn start, rendering works fine!

4. check the console:

index.js:1452 Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function.
in Route (at App.js:10)
in App (at src/index.js:7)

I fired this issue at mobxjs/mobx-react-lite#12 as well.

[timdorr]

This is fixed in 4.4. You can use the beta or wait for a final release.

[danielkcz]

@timdorr I am curious. How is it actually fixed? I mean the prop types validator is still using react-is underneath which is being patched in this fresh new PR created a couple hours ago. I am either missing something here or you might have misunderstood the issue at hand? :)

[vensa-albertgao]

OK, now this is more interesting. I just migrated our company code from using react-loadable to React.lazy. But react-router gives the same error that I reported yesterday in the issue.

And I indeed updated "react-router-dom" to "^4.4.0-beta.6",

Nothing changes... Same error.

Did I miss something here?

I assume the procedure would be, wait the PR for react-is to be landed, then we update the react-router afterward.

[vensa-albertgao]

Found the PR for React-router for bumping the version number, after landing, the issue shall resolved, #6447

[danielkcz]

@vensa-albertgao I wouldn't be so sure about that. There is still pending PR for react-is for handling React.memo. So if the PR #6447 gets merged now, it won't solve this particular issue for sure.

[Albert-Gao]

@FredyC haha, yes, exactly. Forgot that, yes, even this PR lands, we need the actual fix land on react-is. But wait, how could this react router PR knows which version to bump... If react-is has not been fixed, the final version number is not there, yet, right...?

[frehner]

From what I can tell, the bump in #6447 will fix this issue for memo.

The PR linked to by @FredyC is for prop-types and not for react-is; the latest react-is already supports validating memo as noted here in the source code.

At least, from what I'm seeing. I could be wrong, but that's my interpretation of things.

[alan345]

same here.

I have removed node_module as advised #6447 (comment) but no changes

[frehner]

#6447 was merged but hasn't been released yet, so you'll still get that error until there's a new release

[seifsg]

@frehner Hi, when will be there the new release?

[frehner]

@seifsg not sure, I’m not someone who can make a new one so you’ll have to ask those in charge

[pixelypants]

Keen to get a new release also, how can we help?

[VincentLanglet]

No new release since four months.
What is missing @mjackson ? Can we help ?

[muralikrishnana]

Try using <Route render ={()=> < Test />} path="path" /> rather than using the component prop.

[stack-wuh]

i resolved it

[The-Code-Monkey]

@stack-wuh what have you actually done to resolve it a screenshot isnt really much help

[vadymrybak]

Not sure if it's relevant. But in my case I'm using react hooks with router. So in order to get rid of this message I used this code:

import React, { useEffect, lazy } from 'react'
import { Switch, Route, match, withRouter } from 'react-router';

const OrderRoute = () => {

const Orders = lazy(() => import('../Orders/Orders'));
const Order = lazy(() => import('../Order/Order'));

useEffect(() => {
    console.log("%cOrderRoute component loaded / updated", 'color: blue');
});

return <React.Fragment>
         <Switch>
            <Route exact path='/orders' component={withRouter(Orders)}/>
            <Route path='/orders/:orderId' component={withRouter(Order)}/>
        </Switch>
    </React.Fragment>

}

export default OrderRoute;

basically adding withRouter removes the message

[PutziSan]

basically adding withRouter removes the message

Good idea, but you should not use a HOC inside the render function.

I can confirm that this workaround works for 4.3:

import React, { lazy, Suspense } from "react";
import { Route, withRouter } from "react-router-dom";

const LazyComponent = withRouter(lazy(() => import("./YourComponent")));

export function App() {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <Route component={LazyComponent} />
    </Suspense>
  );
}

[danielkcz]

@PutziSan It feels fairly silly to wrap component into another HOC just because DEV-only prop types check is failing :)

What about trying 4.4-beta instead? I had no problem with that so far.

[luisnoresv]

This issue was fixed on the last version of react-router-dom@5.0.0

[agustin107]

I've resolved updating react-router-dom@5.0.1 and react-router@5.0.1.

[gpbl]

We still have this issue and we can't upgrade to v5 because it breaks our production build. Is there an alternative to fix this warning?

[sag1v]

As @gpbl mentioned, some of us can't upgrade to v4 / v5.
So i wonder what is the perf penalty for:

instead of

<Route path='mypath' component={MyComponent} />

to do this

<Route path='mypath' component={props => <MyComponent {...props} />} />

[mqklin]

@sag1v you should use render={props=> <MyComponent {...props}/>} , not component={props => <MyComponent {...props}/>}

[sag1v]

Why not component?
Are you sure render exists on all versions? (3.2.0 for example)

[mqklin]

Hmm, not sure about 3.2.0.
I think component={props => ...} will cause big perf problems, because it will rerender your route component every time.

[sag1v]

because it will rerender your route
component every time

Everytime what, a route change?

[mqklin]

Every time your parent component (where you render <Route...) rerenders. I'm saying this because I had the same problem, that I replaced component with render and now it works OK.

[guilhermecatalan]

Sounds silly to say but... in some cases this is not a bug. One of your routes may be pointing to an empty file, throwing this error.