CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-redux
fgalvao
fgalvao

Reputation: 460

React Router not matching a nested route

I'm having a small problem with React Router. I have the following route config:

ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={ProjectManagerApp}>
                <IndexRoute component={MainDashboard} />
                <Route path='/projects/:id' component={ProjectView}>
                    <IndexRoute component={ProjectPanel} />
                    <Route path='/todos' component={ProjectTodos} />                    
                </Route>                
                <Route path='*' component={NotFound} />            
            </Route>
        </Router>
    </Provider>
    ,
    document.getElementById('app')
);

The problem is with the routes nested inside "ProjectView". The IndexRoute is working, so, when I access "http://localhost:3000/projects/38d38234-5bdb-474a-8db8-6206cefe3e87", for example, the Project Panel component is rendered. But when I access "http://localhost:3000/projects/38d38234-5bdb-474a-8db8-6206cefe3e87/todos", it falls on the NotFound route. Every other route is working correctly. I'm using React Router 3. Can anyone help me, please?

Thanks

Upvotes: 0

Views: 669

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281764

All routes that you specify with a trailing / will be relative to root and hence

<Route path='/todos' component={ProjectTodos} />

can be accessed with http://localhost:8080/todos event tough it is a nested route

To access the way you want remove the trailing /. Specify your routes like

ReactDOM.render(
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={ProjectManagerApp}>
                <IndexRoute component={MainDashboard} />
                <Route path='projects/:id/' component={ProjectView}>
                    <IndexRoute component={ProjectPanel} />
                    <Route path='todos' component={ProjectTodos} />                    
                </Route>                
                <Route path='*' component={NotFound} />            
            </Route>
        </Router>
    </Provider>
    ,
    document.getElementById('app')
);

Upvotes: 2

Related Questions