CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Hinrich
Hinrich

Reputation: 14023

React Router: Route with nested params not hit

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].

Upvotes: 3

Views: 1958

Answers (2)

Hinrich
Hinrich

Reputation: 14023

I found the solution. It was simply a typo in the export of the component like this 

export { defaut as PostDetails } from './post-details/PostDetails'

missing the l in default.

Strangely enough, I had no errors during transpiling. Sorry people and thanks for your efforts!

Upvotes: 0

ChrisR
ChrisR

Reputation: 4008

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>
    );
  }
}

Upvotes: 1

Related Questions