React - 経路パスに変数を挿入する

私は作成しているアプリケーションを持っていて、どのように変数を挿入するのだろうと思っています<Route path={insert variable here} component={myProfile}> myProfileページを作成しようとしています。それをhttp://mywebsite.com/userIdにリダイレクトしますが、path引数に変数Routeを作成しようとすると、そのパスでレンダリングしようとしているコンポーネントが返されません。React - 経路パスに変数を挿入する

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)

出典

2017-08-22 Stuart Fong