user3142695 user3142695 - 3 years ago 187
React JSX Question

how to write nested Routes in react-router v4

I've upgraded the react router to version 4 in my application. But now I'm getting the error

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored


What is wrong with this routing?

import {
Switch,
BrowserRouter as Router,
Route, IndexRoute, Redirect,
browserHistory
} from 'react-router-dom'

render((
<Router history={ browserHistory }>
<Switch>
<Route path='/' component={ Main }>
<IndexRoute component={ Search } />
<Route path='cars/:id' component={ Cars } />
<Route path='vegetables/:id' component={ Vegetables } />
</Route>
<Redirect from='*' to='/' />
</Switch>
</Router>
), document.getElementById('main'))

Answer Source

IndexRoute and browserHistory are not available in the latest version, also nested Routes do not work with v4, Instead, you can specify Routes within the component Itself

import {
    Switch,
    BrowserRouter as Router,
    Route,  Redirect
} from 'react-router-dom'   

render((
    <Router>
        <Switch>
            <Route exact path='/' component={ Main }/>

            <Redirect from='*' to='/' />
        </Switch>
    </Router>
), document.getElementById('main'))

Then in the Main Component

render() {
     return (
        <div>
           {/* other things*/}
           <Route exact path="/" component={ Search } />
           <Route path='cars/:id' component={ Cars } />
         </div>
    )

}

Similarly in the cars component

you will have

render() {
     return (
        <div>
           {/* other things*/}
           <Route path='vegetables/:id' component={ Vegetables } />
        </div>
    )

}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download