Possible incompatibility with React-Router: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`

[alex153410]

I am using React-router 5.0.1 https://reacttraining.com/react-router/web/guides/quick-start with code:

   <Route path='/orderlist' component={OrderList}/>
   <Route exact path='/order/:id' component={OrderPage}/>

And I am creating my React components as the classes (inheriting Componet) and not the function. and I have declarations at the end of my files for OrderList and OrderPage:

const OrderList = connect(mapStateToProps, mapDispatchToProps)(ConnectedOrderList);
export default OrderList;
const OrderPage = withAlert()(withRouter(connect(mapStateToProps, mapDispatchToProps)(ConnectedOrderPage)));
export default OrderPage

Unfortunatley, the Route with the OrderPage is giving the warning:

Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (at main.jsx:27)
    in Main (at App.js:11)
    in div (at App.js:9)
    in App (at src/index.js:29)
    in Provider (at src/index.js:28)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:27)
    in Provider (at src/index.js:26)

I am not sure whether it is React-router or React-alert issue, but - I guess - it would be nice if I could use useAlert in React components that are created as classes.

[besLisbeth]

Hi @alex153410. Did you try to rewrite the code of Route as follows? <Route exact path='/order/:id' component={() => <OrderPage/>}/>

[alex153410]

Thx, this code solved the issue: the warning disappeared and the :id is respected and recognized.