reactjs - React - Route with different paths but with same component -

i trying make profiles page using react , meteor , decided create route each user , render renders person's data according path. however, came across problem in plan, , found makes route 1 user in array , ignores rest. put console.log statement in there see how many times function ran, , seems correct, find when create route same component different path, allows one. how solve problem? tried making profile on browser , found when went profile, got rendered correctly, when copy , paste userid, returns page not found created unknown routes. in theory, plan should work, right? makes route each user , if go url should see profile. don't know if missing tiny or doing wrong here code:

routes.js

import { meteor } "meteor/meteor" import react "react"; import { withrouter, switch, browserrouter, route, redirect, link } "react-router-dom"; import { tracker } "meteor/tracker";  import login "../ui/authentication/login"; import signup "../ui/authentication/signup"; import home "../ui/home"; import { subjectroutes } "../ui/subjectroutes/subjectroutes"; import userprofile "../ui/userprofile"; import addnote "../ui/addnote"; import notfound "../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}/>     })   }   renderuserroutes(){     tracker.autorun(() => {       meteor.subscribe("users")       const users = meteor.users.find().fetch();       console.log(users)       return users.map((user) => {         console.log(`route created pathname=/users/${user._id}`)         return <route component={userprofile} path={`/users/${user._id}`} />       })     });   }   render(){     return (       <div>         <browserrouter>           <switch>             <login path="/login" />             <signup path="/signup" />             <route path="/" component={home} exact/>             {this.rendersubjectroutes(subjectroutes)}             {this.renderuserroutes()}             <addnote path="/addnote"/>             <route component={userprofile} path={`/users/${meteor.userid()}`}/>              <notfound />           </switch>         </browserrouter>       </div>     )   } } 

menu.js

import { meteor } "meteor/meteor" import react "react"; import { withrouter, link } "react-router-dom";  import { subjectroutes } "./subjectroutes/subjectroutes"; import addnote "./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>         <p><link to="/">home</link></p>         {this.rendermenu(subjectroutes)}         <p><link to="/addnote">add note</link></p>         <p><link to={`/users/${meteor.userid()}`}>my profile</link></p>       </div>     )   } } export default withrouter(menu) 

userprofile.js

import { meteor } "meteor/meteor"; import react "react"; import { withrouter } "react-router-dom";  import menu "./menu"  class userprofile extends react.component{   render(){     return(       <div>         <menu />         <p>this profile page user id is: {meteor.userid()}</p>       </div>     )   } } export default withrouter(userprofile); 

wiki