title: TypeError: Cannot read property 'params' of undefined at App React Router
body: <p>Whenever I console log <code>props.match.params</code>, I get an error:</p>
  <p><code>TypeError: Cannot read property 'params' of undefined </code>at App. I'm not sure this is relevant, but even if I console.log(props) I get four empty arrays.
  Here is all the relevant code:</p>
  <h1>Home.js</h1>
  <pre><code>import React from &quot;react&quot;;
  import App from &quot;./App&quot;;
  import { render } from &quot;react-dom&quot;;
  import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    Redirect,
  } from &quot;react-router-dom&quot;;
  
  const Home = () =&gt; {
    return (
      &lt;div&gt;
        &lt;Router&gt;
          &lt;Route exact path=&quot;/&quot;&gt;
            &lt;App /&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/:roomCode&quot; component={App} /&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  };
  
  export default Home;
  </code></pre>
  <h1>App.js (only the relevant part)</h1>
  <pre><code>const App = (props) =&gt; {
  
    console.log(props.match.params);
  
  };
  
  export default App;
  const appDiv = document.getElementById(&quot;app&quot;);
  render(&lt;App /&gt;, appDiv);
  </code></pre>
  <p>I have been trying to figure this out for the past two days. Nothing works. Also, history.push also doesn't work, returns a very similar error. I have a feeling react-router-dom is broken in my project.
  Help is much appreciated.</p>
  <p>Edit:
  Here is the codesandbox: <a href="https://codesandbox.io/s/reverent-microservice-iosu2?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/reverent-microservice-iosu2?file=/src/App.js</a></p>