7

I have followed the react-router-redux example on the github page, but when I try to pass {this.props.children} to the IndexRoute and I try to log it, it's 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, which by googling this error, it's just one of those errors that people say just ignore it since it doesn't affect any of the 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 would render the Headline component successfully but not this.props.children.

Here is an image of the props for the <Router>

And an image for the props of <Route> tag.

qasimalbaqali
  • 1,825
  • 18
  • 45

1 Answers1

6

In react-router v4 you no longer nest routes.

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

Move your routes into your App1Container considering you always want it displayed. Then in your App1Container, add 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>
Kyle Richardson
  • 4,943
  • 2
  • 14
  • 36
  • That is not strictly true. You can nest `Route` components in v4 just fine. It's in fact pretty comon. https://reacttraining.com/react-router/web/example/basic but you either have to choose `` (Same as `{...}`) or `` like the error in OP's post states. – Red Mercury May 02 '17 at 00:29
  • You don't really nest `` anymore. You route to a component and you could put __nested__ routes in the top level route's component. – Kyle Richardson May 02 '17 at 19:14