title: Why does using 'render' prop instead of 'component' prop cause my content in a component rendered by React Router to disappear?
body: <p>I am making an app with React such that I want to pass props to a component that is being rendered by React Router. However, I realised that when I use the 'render' prop instead of the 'component' prop in the router, the original content in the component does not appear. In this case, the text 'this is home page' is not visible when I navigate to localhost:3000/home.</p>
  <pre><code>import React from 'react';
  import { makeStyles} from '@material-ui/core/styles';
  
  const useStyles = makeStyles((theme) =&gt; ({
      today: {
          margin: '0 auto',
          
      }
  }));
  
  export default function HomePage(props) {
      const classes = useStyles();
  
      return (
          &lt;div className={classes.today}&gt;
              this is home page
          &lt;/div&gt;
      )
  }
  </code></pre>
  <pre><code>class App extends Component {
    
    constructor(props) {
      super(props);
      this.state = {
        isLoggedIn: false,
        tasks: ['Walk the dog', 'Hit the gym', 'Finish assignment']
  
      }
    }
  
  
  
    render() {
  
      const { classes } = this.props;
      
      return (
        &lt;div className={classes.root}&gt;
          &lt;AddTodoForm /&gt;
          &lt;Router&gt;
            &lt;Header isLoggedIn={this.state.isLoggedIn}/&gt;
            &lt;Switch&gt;
              &lt;Route path=&quot;/&quot; exact component={LandingPage}&gt;&lt;/Route&gt;
              &lt;Route path=&quot;/login&quot; component={LoginPage}&gt;&lt;/Route&gt;
              &lt;Route path=&quot;/signup&quot; component={SignupPage}&gt;&lt;/Route&gt;
              &lt;Route path=&quot;/home&quot; render={(props) =&gt; (&lt;HomePage tasks={this.state.tasks} /&gt;)}&gt; &lt;/Route&gt;
            &lt;/Switch&gt;
          &lt;/Router&gt;
        &lt;/div&gt;
      );
    }
    
  }
  
  export default withStyles(useStyles)(App);
  </code></pre>