title: Typescript and React: Initializing RouteComponentProps members in React
body: <p>I'm currently learning Typescript and React right now and am currently stuck on being able to access the 'match' member of props correctly. More specifically, I'm having trouble initializing the variables that are implemented from the RouteComponentProps interface.</p>
  
  <p>To simplify things, I have the following 3 files and the corresponding components (path*) just render a header with text:</p>
  
  <p><strong>index.tsx</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  import App from './components/App';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App/&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('roots')
  );
  </code></pre>
  
  <p><strong>app.tsx</strong></p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter as Router, Route, Switch, RouteComponentProps} from 'react-router-dom';
  
  import Path1 from './Path1';
  import Path2 from './Path2';
  import Nav from './Nav'
  
  class App extends React.Component&lt;RouteComponentProps&gt; {
    render(): JSX.Element{
      return (
        &lt;Router&gt;
          &lt;div className="App"&gt;
            &lt;Nav history={this.props.history} location={this.props.location} match={this.props.match}/&gt;
            &lt;Switch&gt;
              &lt;Route path="/" exact component={Home} name="Home"/&gt;
              &lt;Route path="/path1" exact component={Path1} name="path1"/&gt;
              &lt;Route path="/path2" exact component={Path2} name="path2"/&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App
  </code></pre>
  
  <p><strong>Nav.tsx</strong></p>
  
  <pre><code>import React from 'react';
  import { Link, RouteComponentProps } from 'react-router-dom';
  
  class Nav extends React.Component&lt;RouteComponentProps&gt;{
    render(): JSX.Element {
      return (
        &lt;div className="Nav"&gt;
          {this.props.match.path}
          &lt;ul className="NavLinks"&gt;
            &lt;Link to="/"&gt;
              &lt;li&gt;Home&lt;/li&gt;
            &lt;/Link&gt;
            &lt;Link to="/Path1"&gt;
              &lt;li&gt;Path1&lt;/li&gt;
            &lt;/Link&gt;
            &lt;Link to="/Path2"&gt;
              &lt;li&gt;Path2&lt;/li&gt;
            &lt;/Link&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The basic idea is that upon clicking each link, the Nav component only updates the text at the top of the page based on whatever page the user is on. My reasoning behind putting the nav bar code where it is, is that it would save time in the future when adding more routes in.</p>
  
  <p><strong>Issue</strong><br>
  My issue is that I need to pass the initial props in index.tsx, however I can't seem to find anything on how to initialize the props that are in the interface RouteComponentProps. Or if I'm doing it wrong (or anything else with the code) please tell me. I'm new when it comes to react/typescript and I would like to learn the right way the first time to not re-enforce bad habits.</p>