'styled-components' and 'react-router' warning: Warning: Failed prop type: Invalid prop component of type object supplied to Route, expected function.

[elyran]

https://codesandbox.io/s/z2z94vx43p

  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.2",
    "styled-components": "^4.1.3"
  },

Getting this warning at the console:

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

Code snippet ( App.js ):

import React, { Component } from 'react';

import styled from 'styled-components'
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'

class App extends Component {
  render() {
    return (
      <div className={this.props['className']}>
        <header className="App-header">
          <Router ref='router'>
            {
              <Switch>
                <Route component={DefaultRoute} />
              </Switch>
            }
          </Router>

        </header>
      </div>
    );
  }
}

export default App

//////////////////////////////////////////////////////////////////////////

class DefaultRouteComponent extends Component {
  render() {
    return (
      <div className={this.props['className']}>

        Hi from DefaultRoute!

      </div>
    );
  }
}

// const DefaultRoute = DefaultRouteComponent // << GOOD: No warning!
const DefaultRoute = styled(DefaultRouteComponent)` // BAD: Generates warning!
background-color: green;
padding: 3rem;
`

Funny thing is, when DefaultRoute (AFTER being styled()) is wrapped by connect() of react-redux, the warning goes away.

[elyran]

Solved by react-router v4.4: remix-run/react-router#6471 (comment)