title: Use params in react Link and get the value of it in another component?
body: <p>The question may sound confusing but here's what i mean,
  I have two components that are in no way related, they're not parent or child to each other basically,
  This is the first Component:</p>
  
  <pre><code>import React from 'react';
  import {Link} from 'react-router-dom';
  
  class Test extends React.Component {
      render() {
          const slug="NewYork"
          return (
              &lt;Link to={`/TestRoute/${slug}`}&gt;
                  City
              &lt;/Link&gt;
          );
      };
  }
  export default Test;
  </code></pre>
  
  <p>And here is my second Component:</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  export default class Api extends React.Component {
  
      componentDidMount() {
          const options = {
              headers: {
                  'Authorization': localStorage.getItem('api_key'),
                  'content-type': 'application/json'
              }
          };
          axios.get('urlLink/Slug' , options)
              .then((response) =&gt; {
                  console.log(response);
              });
      }
      render() {
          return &lt;div&gt;
              hi
          &lt;/div&gt;
      }
  }
  </code></pre>
  
  <p>And the Route` i'm using for the second Component is this</p>
  
  <pre><code>
  &lt;Route path="/TestRoute/:slug" &gt;
       &lt;FetchRandomUser2 /&gt;
  &lt;/Route&gt;
  
  </code></pre>
  
  <p>So basically what i'm trying to do is get that slug in the first component and add it to end of the <code>url</code> in my <code>api</code> call, but i don't know how to do it, so is there a way to get that slug <code>param</code> and adding to end of that <code>api</code> call?</p>