CODEWITHSUNDEEP
javascriptreactjsreact-router
Pablo
Pablo

Reputation: 10602

What is wrong with this react routes

I have this routes config with react-router:

render((
    <Router history={browserHistory}>
        <Route path="/" component={PoApp}>
            <IndexRoute component={Home} />
            <Route name="category" path="notices/:category" component={Category}>
                <Route name="notice" path=":id" component={Content} />
                <IndexRoute component={Home} />
            </Route>
        </Route>
    </Router>
), document.getElementById('poApp'));

For / and notices/:category works fine

But for :id (which would be /notices/:category/:id) it still loads the Category Component. What is wrong?

I let here some examples of how should work, if I didn't be clear:

/ => PoApp

/notices/cars => Category

/notices/cars/2 => Content

Upvotes: 0

Views: 132

Answers (1)

Alfiyum
Alfiyum

Reputation: 411

As per the answer to similar question, nested routes are for embedding nested components and not to refer to different components at nested routes.

In your case, Category component should have a placeholder for child component(like <RouteHandler /> or {this.props.children} depending on your router version). Then with nested route appropriate child component will be embedded into the parent component.

Upvotes: 2

Related Questions