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

  "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;

1. yarn start, rendering works fine!

2. 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 https://github.com/mobxjs/mobx-react-lite/issues/12 as well.

[stack-wuh]

i resolved it

[muralikrishnana]

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