title: React how to add objects "id" to the URL
body: <p>I have a question that I'm sure is simple, but I don't know the answer to. I want to add an objects &quot;id&quot; to the url, so that when a button is pressed, the corresponding id is added to the url.</p>
  <p>Here is the code where I have the object 'arr':</p>
  <pre><code>import React from 'react';
  import Button from '@material-ui/core/Button';
  import { makeStyles } from '@material-ui/core/styles';
  import history from '../../history';
  
  const useStyles = makeStyles((theme) =&gt; ({
      Header: {
          background: '#C4C4C4',
          textAlign: 'center',
          verticalAlign: 'center',
          height: '100px', 
          width: '100%',
          boxShadow: '0px 2px 2px #A9A9A9',
      },
      Title: {
          verticalAlign: 'middle',
          textAlign: 'center',
          paddingTop: '30px',
          fontFamily: 'PT Sans Caption',
          fontSize: '36px',
      },
      Buttons: {
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
      },
      button: {
          margin: '0 auto',
          background: '#C4C4C4',
          fontFamily: 'PT Sans Caption',
          fontSize: '18px',
          borderRadius: '10px',
          padding: '10px',
          marginTop: '50px',
          width: '700px',
          display: 'flex',
      },
  }));
  
  export default function HomePage() {
      const classes = useStyles();
      const arr = [
          {
              id: 1,
              name: 'squat',
              weight: 100
          },
          {
              id: 2,
              name: 'bench',
              weight: 200
          },
          {
              id: 3,
              name: 'deadlift',
              weight: 300
          },
      ];
      const newMovements = arr.map((movement) =&gt; 
          &lt;Button 
              key={movement.id}
              className={classes.button}
              onClick={() =&gt; history.push(&quot;/movement&quot;)}&gt;
              {movement.name}
          &lt;/Button&gt;
      );
      return (
          &lt;div&gt;
              &lt;div className={classes.Header}&gt;
                  &lt;div className={classes.Title}&gt;App Name&lt;/div&gt;
              &lt;/div&gt;
              &lt;div className={classes.Buttons}&gt;
                  &lt;span&gt;{newMovements}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      );
  };
  </code></pre>
  <p>Here is the code where I'm calling the route:</p>
  <pre><code>export default class App extends Component {
      render() {
          return (
              &lt;Router history={history}&gt;
                  &lt;Switch &gt;
                      &lt;Route exact path=&quot;/&quot; render={ (props) =&gt; &lt;HomePage /&gt; }/&gt;
                      &lt;Route exact path=&quot;/movement&quot; render={ (props) =&gt; &lt;PercentPage /&gt; } /&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          );
      }
  };
  </code></pre>
  <p>Right now, when I click on one of the buttons, it redirects me to the Percent page and changes the url to: '/movement', but I want it to be '/movement/1' for example. Any help would be appreciated!</p>