title: React router dom - Link. How can I put an ID into the path of Link
body: <p>So I am mapping over an array of users, and each user has a unique ID. I am wanting to create a path for the link which will include the unique ID of the user, depending on which link is clicked. Here is what I have tried so far (Link does not allow me to use template literals for some reason)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {useEffect, useState} from 'react';
  //import {axiosWithAuth} from '../api/axiosWithAuth';
  //import axios from 'axios';
  import {connect} from 'react-redux';
  import {useParams, Link} from 'react-router-dom';
  import {fetchUsers} from '../actions/index';
  
  //get request to /api/users -- will return array of users
  
  const ListUsers = props =&gt;{
      const [data, setData] = useState([{username:'hello world!'}]);
      const params = useParams();
      const path = `/Profile/${params.id}`
  
      // function myFunction(id) {
      //    alert(item.id);
      // }
  
      useEffect(() =&gt; {
          props.fetchUsers();
      }, [])
  
      return(
          &lt;div&gt;
              {props.users.map(item=&gt;{return(
              &lt;Link path='/Profile' params={{id: item.id}}&gt;
                  &lt;div className="UsersCard"&gt;Username: {item.username} &lt;br /&gt; Name: {item.firstName} &lt;br /&gt; ID: {item.id} &lt;br /&gt; Email: {item.email} &lt;/div&gt;
              &lt;/Link&gt;
                  )})}
          &lt;/div&gt;
      )
  }
  
  const mapStateToProps = state =&gt; {
      return {
          users: state.users, 
          user: {}, 
          registerSuccessMessage: '',
          user_stories: {}, 
          isLoading: false, 
          error: null 
      }
  }
  
  export default connect(mapStateToProps, {fetchUsers})(ListUsers);
  
  //get request to /api/users/:id -- will return users specified by ID</code></pre>
  </div>
  </div>
  </p>
  <p>Here is my routes</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
  import PrivateRoute from './api/PrivateRoute';
  import SignIn from './Components/SignIn';
  import SignUp from "./Components/SignUp";
  import Profile from './Components/Profile';
  import Stories from './Components/Stories';
  import Nav from "./Components/Nav";
  import ListUsers from './Components/ListUsers';
  import EditUser from './Components/EditUser';
  
  function App() {
    return (
      &lt;div className="App"&gt;
        &lt;Router&gt;
          &lt;Nav/&gt;
          &lt;Switch&gt;
            &lt;Route path='/SignIn' component={SignIn} /&gt;
            &lt;Route path='/SignUp' component={SignUp} /&gt;
            &lt;Route exact path='/' /&gt;
            &lt;PrivateRoute path='/UsersList' component={ListUsers} /&gt;
            &lt;PrivateRoute exact path='/Profile/:id' component={Profile} /&gt;
            &lt;PrivateRoute path='/Stories' component={Stories} /&gt;
            &lt;PrivateRoute path='/Profile/:id/editProfile' component={EditUser} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>I want it to take me to the '/Profile/:id' route according to whichever user is clicked</p>