title: Pass props to props.history.push('path') in ReactJS
body: <p><strong>BACKGROUND</strong></p>
  
  <p>I am attempting to learn ReactJS by building my first Single Page Application. I usually work in .NET MVC, and I'm coming across some difficulties in the thought process required for SPAs. Anyways, I am using the latest version of React &amp; React Router. Here is what I have at the moment.</p>
  
  <p><a href="https://i.stack.imgur.com/dJ93m.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dJ93m.png" alt="my app UI"></a></p>
  
  <p><strong>CODE</strong></p>
  
  <p>So far, I have <strong>5 true components</strong> in total. Here they are in order of usage:</p>
  
  <ol>
  <li>App</li>
  <li>ArtistList
  
  <blockquote>
    <p>Loops over artist array (coming from a local variable so far) and draws Artistcards</p>
  </blockquote></li>
  <li>ArtistCard</li>
  <li>Artist
  
  <blockquote>
    <p>Think of this as the detailed view of an artist. You get here by clicking an ArtistCard (shown in screenshot) so that you can see the list of LyricCards</p>
  </blockquote></li>
  <li>LyricCard</li>
  </ol>
  
  <p>My routes are declared in my [App component]. Here is the JSX for that.</p>
  
  <pre><code>&lt;div className="App"&gt;
    &lt;Header /&gt;
    &lt;Route exact path="/" render={routeProps =&gt; &lt;ArtistList {...routeProps} artists={artists} /&gt;} /&gt;
    &lt;Route exact path="/artist/:artistUrlName" component={Artist} /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the <strong>code for my [ArtistList component]</strong>:</p>
  
  <pre><code>class ArtistList extends Component {
    render() {
      return (
        &lt;div className="artist-list"&gt;
          {this.props.artists.map(artist =&gt;
            &lt;ArtistCard key={artist.imageUrl} artist={artist} history={this.props.history} /&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here is the <strong>code for my [ArtistCard component]</strong>:</p>
  
  <pre><code>class ArtistCard extends Component {
    constructor() {
      super();
      this.navigateToArtist = this.navigateToArtist.bind(this);
    }
    navigateToArtist() {
      this.props.history.push(`/artist/${this.props.artist.urlFriendlyName}`);
    }
    render() {
      return (
        &lt;div
          className="artist-card"
          onClick={() =&gt; {
            this.navigateToArtist();
          }}
        &gt;
          &lt;div className="artist-image"&gt;
            &lt;img src={this.props.artist.imageUrl} alt="artist" /&gt;
          &lt;/div&gt;
          &lt;div className="artist-name"&gt;
            &lt;h3&gt;
              {this.props.artist.name}
            &lt;/h3&gt;
          &lt;/div&gt;
          &lt;div className="artist-meta"&gt;
            &lt;div className="artist-lyrics"&gt;
              &lt;h4&gt;
                {this.props.artist.lyricsCount}
              &lt;/h4&gt;
            &lt;/div&gt;
            &lt;div className="artist-hearts"&gt;
              &lt;h4&gt;
                {this.props.artist.likesCount}
              &lt;/h4&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>PROBLEM</strong></p>
  
  <p>When clicking an artist card (e.g. James Brown), I am able to navigate to the route <code>/artist/james-brown</code>, but I don't know how I can pass the data (the props) required by the [Artist component] (which will show a list of lyric cards).</p>
  
  <p>As mentioned, this is my first ever SPA, and I am not sure if I'm going about this the right way. As a developer, I know I can grab the <code>urlFriendlyName</code> from the URL and pass that to an API endpoint that would get me a list of the lyrics (and other stuff I may need), and I can then set those on the <code>state</code> of the component via one a relevant component life-cycle mount method.</p>
  
  <p>But is that the way with SPAs? I mean another way I can do this would be to make a single call to the API endpoint in my controller / parent [App component] and get all artists and their lyrics and everything else I need? I'll still need you to tell me how I can then pass the artist data and all his/her lyrics via props to the [Artist component].</p>