title: How to create dynamic routes with react-router-dom?
body: <p>I learn react and know, how to create static routes, but can't figure out with dynamic ones. Maybe someone can explain, I'll be very grateful. Let there be two components, one for rendering routes, and another as a template of a route. Maybe something wrong in the code, but hope You understand..</p>
  
  <p>Here is the component to render routes:</p>
  
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import Hero from './Hero';
  
  class Heroes extends Component {
    constructor(props) {
      super(props);
      this.state = {
        heroes: [],
        loading: true,
        error: false,
      };
    }
    componentDidMount() {
      axios.get('http://localhost:5555/heroes')
        .then(res =&gt; {
          const heroes = res.data;
          this.setState({ heroes, loading: false });
        })
        .catch(err =&gt; { // log request error and prevent access to undefined state
          this.setState({ loading: false, error: true });
          console.error(err);
        })
    }
    render() {
      if (this.state.loading) {
        return (
          &lt;div&gt;
            &lt;p&gt; Loading... &lt;/p&gt;
          &lt;/div&gt;
        )
      }
      if (this.state.error || !this.state.heroes) {
        return (
          &lt;div&gt;
            &lt;p&gt; An error occured &lt;/p&gt;
          &lt;/div&gt;
        )
      }
      return (
        &lt;div&gt; 
          &lt;BrowserRouter&gt;
            //what should be here?
          &lt;/BrowserRouter&gt;      
        &lt;/div&gt;
      );
    }
  }
  
  export default Heroes;
  </code></pre>
  
  <p>The requested JSON looks like this:</p>
  
  <pre><code>const heroes = [
    {
      "id": 0,
      "name": "John Smith",
      "speciality": "Wizard"
    },
    {
      "id": 1,
      "name": "Crag Hack",
      "speciality": "Viking"
    },
    {
      "id": 2,
      "name": "Silvio",
      "speciality": "Warrior"
    }
  ];
  </code></pre>
  
  <p>The route component (maybe there should be props, but how to do it in the right way):</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Hero extends Component {
    render() {
      return (
        &lt;div&gt;
          //what should be here?
        &lt;/div&gt;
      );
    }
  }
  
  export default Hero;
  </code></pre>
  
  <p>I need something like this in browser, and every route url should be differentiaie by it's id (heroes/1, heroes/2 ...):</p>
  
  <p><strong>John Smith
  Crag Hack
  Silvio</strong></p>
  
  <p><em>Each of them:</em></p>
  
  <p><strong>John Smith.
  Wizard.</strong></p>
  
  <p><em>and so on...</em></p>
  
  <p>Many thanks for any help!)</p>