Kristoffer Abell Kristoffer Abell - 14 days ago 10
React JSX Question

React Router not working when given params

Can can't find the problem here it might be a typo but I think I have followed the documentation..

index.js:

ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={App}></Route>
<Route path="/match:id" component={MatchFeedComponent}></Route>
<Route path="/user" component={UserPageComponent}></Route>
<Route path="/comments" component={CommentHolderComponent}></Route>
<Route path="/post-talk" component={AddTalkComponent}></Route>
<Route path="/add-match" component={AddMatchComponent}></Route>
</Router>,
document.getElementById('app')
);


In my

<Link to={{ pathname:"/match/", query: {id: this.id}}}>


I get:
[react-router] Location "/match/?id=-KXKIhpF8mdWDn9C5Tnd" did not match any routes


It works fine without any params but can't find it now.

Answer

If you want "id" to be a query string param, it shouldn't appear in your route. Change to this:

<Route path="/match" component={MatchFeedComponent}></Route>

...and then just pick up the id from props.location.query inside your component