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

i resolved it

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

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

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

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

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.

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} />} />

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

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.

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.

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?

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>
  );
}

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