score:10

Accepted answer

IndexRoute and browserHistory are not available in the latest version, also Routes do not accept children Routes 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() {
     const {match} = this.props;
     return (
        <div>
           {/* other things*/}
           <Route exact path="/" component={ Search } />
           <Route path={`${match.path}cars/:id`} component={ Cars } />
         </div>
    )

}

Similarly in the cars component

you will have

render() {
     const {match} = this.props;
     return (
        <div>
           {/* other things*/}
           <Route path={`${match.path}/vegetables/:id`} component={ Vegetables } />
        </div>
    )

}

score:0

Nested routes are not available from version react-router 4.x. Here is a basic example straight from react-router documentation on how to code for nesting route secnarios in v4.x.

Also have a look on this question as well Why can I not nest Route components in react-router 4.x?


Related Query

More Query from same tag