This.props.children undefined when using response-router-redux

Question

I followed the action-router-redux example on the github page, but when I try to pass {this.props.children} to IndexRoute and I try to register it, undefined.

The only error I get through the console is Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored , which, following this error, is simply one of those errors that people say simply ignore it, because it does not affect any code (for some reason).

package.json

 .... "react": "^0.14.7", "react-redux": "^4.4.0", "react-router": "^4.0.0", "react-router-dom": "^4.0.0", "react-router-redux": "^4.0.8", "redux": "^3.3.1", "redux-thunk": "^1.0.3" ... 

routes.js

 import React from 'react'; import { Route, IndexRoute } from 'react-router'; import Items from "./components/Items" import App1Container from "./containers/App1Container"; import ItemDetailContainer from "./containers/ItemDetailContainer"; export default ( <Route path="/" component={App1Container}> <IndexRoute component={Items} /> <Route path="i/:id" name="item-detail" component={ItemDetailContainer} /> </Route> ); 

App.jsx

 import React from "react" import { render } from "react-dom" import { createStore, compose, applyMiddleware, combineReducers, } from "redux" import { Provider } from "react-redux" import { Router, Route, browserHistory, IndexRoute } from 'react-router'; import { syncHistoryWithStore, routerReducer } from 'react-router-redux' import { createBrowserHistory } from 'history'; import thunk from 'redux-thunk' import * as reducers from './reducers' import routes from './routes'; let finalCreateStore = compose( applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f )(createStore); let reducer = combineReducers({ ...reducers, routing: routerReducer }); let store = finalCreateStore(reducer); const history = syncHistoryWithStore(createBrowserHistory(), store); const router = ( <Provider store={store}> <Router history={history}>{routes}</Router> </Provider> ); render(router, document.getElementById('App')); 

App1Container.jsx

 import React from "react" import Radium from "radium" import { connect } from "react-redux" import Headline from "../components/Headline" @connect(state => ({ items: state.items, })) @Radium export default class App1Container extends React.Component { render() { console.log(this.props.children) return ( <div> {/* just a an h1 tag with some text in it */} <Headline/> {this.props.children} </div> ) } } 

App1Container will display the Headline component successfully, but not this.props.children.

Answer 1

In response-router v4, you no longer set routes.

 <Route path="/" component={App1Container}> <IndexRoute component={Items} /> <Route path="i/:id" name="item-detail" component={ItemDetailContainer} /> </Route> 

Move the routes to your App1Container, believing that you always want to display it. Then in App1Container add the routes as follows:

 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; <Router> <Switch> <Route path="/" exact component={ Items } /> <Route path="/i/:id" name="item-detail" component={ ItemDetailContainer } /> </Switch> </Router>