Passing parameter with React-Router in Meteor

Question

I am learning MeteorJS, React and React-Router and I am having difficulty passing a parameter in the URL through the router. I have searched for the answer and I cannot find what I am doing wrong:

In my Routes.jsx file ('lists' is my MongoDB collection):

   render: function() {
    return (
      <Router history={browserHistory}>
        <Route path='/' component={Navbar}>
            <Route path='/home' component={Home} />
            <Route path='/register' component={Register} />
            <Route path='/login' component={Login} />
            <Route path='/listpages/:listId' component={ListPages} />
          </Route>
      </Router>
    );
  }

and in my MyLists.jsx file (inside the component):

  renderLists() {
      return this.data.lists.map((myList) => {
        return
           <li key={myList._id}>
           <Link to='listpages' params={{ listId: myList._id}}>
              {myList.name}
           </Link>
               </li>;
      });
  },

  render() {
    return (
      <div>
        <h2>Lists</h2>
        <AddList />
        <ul>
          {this.renderLists()}
        </ul>
      </div>
    );
  }

When I click on one of the links for ListPages, I get the console error:

Warning: Location "listpages" did not match any routes

Also, the correct listId is embedded in the line item, but not the URL:

<li>
  <Link to="listpages" params={listId: "qksabGvfeuf5PdaJv"} onlyActiveOnIndex=false...>
    <a params={listId: "qksabGvfeuf5PdaJv" className="" style={}...>Inbox</a>
  </Link>
</li>

But if I remove the parameter to this:

<Route path='/listpages' component={ListPages} />

then it works as expected and the contents of ListPages is displayed (right now it's only a heading to see if I get there). So ListPages does exists, but not when I pass the parameter. What am I doing wrong?

Thank you in advance for any help you can provide!

adinutzyc21 · Accepted Answer · 2017-05-04 01:48:38Z

1

For anyone that may have stumbled upon this page doing a Google search:

This question may have been asked prior to the current version of React Router, but the correct way to do links with path='/route/:id' is to do <Link to={'/route/' + id} where the id is the thing you want to display. Since you're missing the key id part, you're getting an error.

For example, I want to show a table with a specific ID that I get as a prop.

Routes.jsx:

...
<Route path='/DisplayTable/:tableId' component={ Comp } />
...

Component I am going to display the table from (SelectTable.jsx):

...
<Link to={'/DisplayTable/' + this.props.tables[i]._id} />
...

answered May 4, 2017 at 1:48

adinutzyc21

1,6182 gold badges12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shahzaib Ali Khan · Accepted Answer · 2016-01-04 19:23:32Z

0

You can pass your query parameter like this,

<Link to={{ pathname: 'listpages', query: { listId: myList._id } }}>

answered Jan 4, 2016 at 19:23

Shahzaib Ali Khan

7176 silver badges14 bronze badges

Comments

PTKen · Accepted Answer · 2016-01-04 20:22:12Z

0

Thank you for the input. I made the change and the first time it loaded, I clicked the link and received the same error (Warning: Location "listpages" did not match any routes). When I refreshed to try it again, now the application crashes on startup with an unexpected token error on the line that you suggested.

answered Jan 4, 2016 at 20:22

PTKen

11 bronze badge

1 Comment

PTKen Over a year ago

As an update, I've given up on React-Router and I've decided to give Flow Router a try...

Collectives™ on Stack Overflow

Passing parameter with React-Router in Meteor

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related