React - inserting variable into Route path

Question

I have an app that I am creating and am wondering how you would insert variables into the <Route path={insert variable here} component={myProfile}> 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 http://mywebsite.com/userId but when I try to create a Route with a variable in the path argument, it does not return the component I am trying to render when on that path.

routes.js

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) => {
      return <Route key={subject.name} path={subject.path} component={subject.component}/>
    })
  }
  render(){
    return (
      <div>
        <BrowserRouter>
          <Switch>
            <Login path="/login" />
            <Signup path="/signup" />
            <Route path="/" component={Home} exact/>
            {this.renderSubjectRoutes(SubjectRoutes)}
            <AddNote path="/addNote"/>
            <myProfile path={Meteor.userId()} /> //<-- Here
            <NotFound />
          </Switch>
        </BrowserRouter>
      </div>
    )
  }
}

Menu.js

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) => {
      return <p key={item.name}><Link to={item.path}>{item.name}</Link></p>
    })
  }
  render(){
    return(
      <div>
        <h1>Menu</h1>
        {this.renderMenu(SubjectRoutes)}
        <p><Link to="/addNote">Add a Note</Link></p>
        <p><Link to={Meteor.userId()}>My Profile</Link></p>
      </div>
    )
  }
}
export default withRouter(Menu)

Answer 1

You are creating way more work for yourself, and this is the wrong way to add variables to route. What you're looking to do is add params to your route. In your case, you would want it to look something like this.

<Route path="/user/:userId" />

The : is what denotes that it is a parameter, ready to render a path based on the userId. So if you went to route /user/123 - it would be able to render user 123's data.

Here's some documentation to help you out.

https://reacttraining.com/react-router/web/example/url-params