Error while using with React-Router

[XPilot]

There seems to be some issues when trying to use connected components as router components. Can you please help me with this issue?

Here's what I try to do (simplified version):

Error:

warning.js?1b0b:33 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (created by ROUTER)
    in ROUTER (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp (created by BookingEngineAppProvider)
    in n (created by ContextProvider)
    in ContextProvider (created by BookingEngineAppProvider)
    in ApolloProvider (created by BookingEngineAppProvider)
    in AppContainer (created by BookingEngineAppProvider)
    in BookingEngineAppProvider

---

// Some page component
class MainPage extends Component {
  render() {
    return (
      <div className="MainPage">
        Main page 2
      </div>
    );
  }
}

export default connect(state => ({
  texts: state.texts || {},
}))(MainPage);


// App component with router
class App extends Component {
  render() {
    return (
	<Router>
	  <Route path="/" exact={exact} component={MainPage} />;
	</Router>
	);
  }
}

[elisherer]

Looks like it relates to us using forwardRef
remix-run/react-router#6056
reduxjs/react-redux#914

@didierfranc, Do we need to change something? (we are not exactly using forwardRef as in the docs)

[jgbright]

I ran into this problem, too. When I use the react-router code from the remix-run/react-router/pull/5908 pull request, the problem is still there. For my purposes, compatibility with react router is more important than the forwardRef functionality. I suspect it will be some time before the react router issues are resolved, so I made a branch that removes forwardRef from react-waterfall.

[uxdxdev]

This is something to do with this

export default connect(state => ({
  texts: state.texts || {},
}))(MainPage);

It seems like the Route component is not getting the MainPage export because of the call to connect.

Using a function to return the MainPage container works.

<Route path="/" exact={exact} component={() => MainPage} />;

[nathcodestoo]

@beautifwhale Do you think this should be considered the right way to implement Routes when dealing with redux? I've been using your solution so far, but since there's no such reference in the docs, I got a bit worried about it 😩