Nested Routes in v4 Reaction Router

Question

I upgraded the response router to version 4 in my application. But now I get an 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 1

IndexRoute and browserHistory are not available in the latest version, and Routes do not accept child Routes with v4. Instead, you can specify Routes inside 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 car components

You will have

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

Answer 2

Nested routes are not available from response-router 4.x. Here is a basic example right from the reactor-router documentation on how to code for embedding the secnarios route in v4.x.

Also pay attention to this question, as well as Why can't I nest route components in response-router 4.x?