title: React - inserting variable into Route path
body: <p>I have an app that I am creating and am wondering how you would insert variables into the <code>&lt;Route path={insert variable here} component={myProfile}&gt;</code>  I am trying to create a myProfile page and I am trying to get it so when they click onto the link, it redirects them to <code>http://mywebsite.com/userId</code> but when I try to create a <code>Route</code> with a variable in the <code>path</code> argument, it does not return the component I am trying to render when on that path.</p>
  
  <p><strong>routes.js</strong></p>
  
  <pre><code>import { Meteor } from "meteor/meteor"
  import React from "react";
  import { withRouter, Switch, BrowserRouter, Route, Redirect, Link } from "react-router-dom";
  
  import Login from "../ui/authentication/Login";
  import Signup from "../ui/authentication/Signup";
  import Home from "../ui/Home";
  import { SubjectRoutes } from "../ui/subjectRoutes/subjectRoutes";
  import AddNote from "../ui/AddNote";
  import myProfile from "../ui/myProfile";
  import NotFound from "../ui/NotFound";
  
  export default class Routes extends React.Component{
    renderSubjectRoutes(subjects){
      return subjects.map((subject) =&gt; {
        return &lt;Route key={subject.name} path={subject.path} component={subject.component}/&gt;
      })
    }
    render(){
      return (
        &lt;div&gt;
          &lt;BrowserRouter&gt;
            &lt;Switch&gt;
              &lt;Login path="/login" /&gt;
              &lt;Signup path="/signup" /&gt;
              &lt;Route path="/" component={Home} exact/&gt;
              {this.renderSubjectRoutes(SubjectRoutes)}
              &lt;AddNote path="/addNote"/&gt;
              &lt;myProfile path={Meteor.userId()} /&gt; //&lt;-- Here
              &lt;NotFound /&gt;
            &lt;/Switch&gt;
          &lt;/BrowserRouter&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>Menu.js</strong></p>
  
  <pre><code>import { Meteor } from "meteor/meteor"
  import React from "react";
  import { withRouter, Link } from "react-router-dom";
  
  import { SubjectRoutes } from "./subjectRoutes/subjectRoutes";
  import AddNote from "./AddNote";
  
  class Menu extends React.Component{
    renderMenu(items){
      return items.map((item) =&gt; {
        return &lt;p key={item.name}&gt;&lt;Link to={item.path}&gt;{item.name}&lt;/Link&gt;&lt;/p&gt;
      })
    }
    render(){
      return(
        &lt;div&gt;
          &lt;h1&gt;Menu&lt;/h1&gt;
          {this.renderMenu(SubjectRoutes)}
          &lt;p&gt;&lt;Link to="/addNote"&gt;Add a Note&lt;/Link&gt;&lt;/p&gt;
          &lt;p&gt;&lt;Link to={Meteor.userId()}&gt;My Profile&lt;/Link&gt;&lt;/p&gt;
        &lt;/div&gt;
      )
    }
  }
  export default withRouter(Menu)
  </code></pre>