React Router not working when given params

Question

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.

Jeff McCloud · Accepted Answer · 2016-11-25 19:58:30Z

2

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

edited Nov 25, 2016 at 19:58

answered Nov 25, 2016 at 18:51

Jeff McCloud

5,9771 gold badge22 silver badges21 bronze badges

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

Comments

Fabian Schultz · Accepted Answer · 2016-11-25 18:47:57Z

2

React Router usually doesn't work with the "regular queries", at least how you've set it up. Your Router expects something like /match/-KXKIhpF8mdWDn9C5Tnd instead of /match/?id=-KXKIhpF8mdWDn9C5Tnd. Try this as your Link:

<Link to={`/match/${this.id}`}>

and then change your route to:

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

answered Nov 25, 2016 at 18:47

Fabian Schultz

18.6k6 gold badges54 silver badges58 bronze badges

Collectives™ on Stack Overflow

React Router not working when given params

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related