Passing parameter with React-Router in Meteor - mongodb

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!

Answer 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} />
...

Answer 2

You can pass your query parameter like this,
<Link to={{ pathname: 'listpages', query: { listId: myList._id } }}>

Answer 3

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.