title: How to use props.match.params?
body: <p>I am passing a videoId from Dashboard to URL path and fetching it in Videoplayer Component using <code>props.match.params.videoId</code>. If I use VideoPlayerContainer in App.js route I get error <code>TypeError: Cannot read property 'params' of undefined</code> but if I use VideoPlayer component instead of container in App.js route it works and gets the videoId from URL.</p>
  <p>Any Idea how to make it work with using VideoPlayerContainer?</p>
  <p>App.js</p>
  <pre><code>function App() {
        return (
          &lt;React.Fragment&gt;
            &lt;Switch&gt;
          &lt;ProtectedRoute
            exact
            path=&quot;/dashboard&quot;
            component={DashboardContainer}
          /&gt;
              &lt;ProtectedRoute
                exact
                path=&quot;/videoplayer/:videoId&quot;
                component={VideoPlayerContainer}
              /&gt;
            &lt;/Switch&gt;
          &lt;/React.Fragment&gt;
        );
      }
      export default App;
  
   
  </code></pre>
  <p>VideoPlayerContainer</p>
  <pre><code>    export default function VideoPlayerContainer() {
    return (
      &lt;React.Fragment&gt;
        &lt;div&gt;
          &lt;PublicNav /&gt;
          &lt;VideoPlayer /&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  }  
  </code></pre>
  <p>VideoPlayer</p>
  <pre><code>    export default function VideoPlayer(props) {
    const classes = useStyles();
    let videoId = props.match.params.videoId;
    const [video, setVideo] = useState([]);
    const [CommentLists, setCommentLists] = useState([]);
  
    const videoVariable = {
      videoId: videoId,
    };
  </code></pre>