React Router: Route with nested params not hit

Question

In my react app, I have set up routes like this

class App extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Route exact path="/" component={PostList} />
        <Route exact path="/:category" component={PostList} />
        <Route exact path="/:category/:postid" component={PostDetails} />
      </div>
    );
  }
}

/ and foo are rendering the PostList component just fine. But when I try to reach the PostDetails component with for instance /foo/bar, it does not get hit.

I tried to play around with the order of the route definitions as well as with the exact prop, but no luck. Not getting any errors, the inspector in devtools just does not show any output where the component should be at.

What am I missing here? I am using [email protected].

Answer 1

If you want only one of the routes to show, you should use a Switch.

class App extends Component {
  render() {
    return (
      <div className="app">
        <Header />
        <Switch>
            <Route exact path="/" component={PostList} />
            <Route exact path="/:category" component={PostList} />
            <Route exact path="/:category/:postid" component={PostDetails} />
        </Switch>
      </div>
    );
  }
}