CODEWITHSUNDEEP
reactjsmeteor
Stuart Fong
Stuart Fong

Reputation: 633

React - inserting variable into Route path

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)

Upvotes: 9

Views: 19549

Answers (1)

Christopher Messer
Christopher Messer

Reputation: 2090

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

Upvotes: 12

Related Questions