this.props.children在使用react-router-redux

Question

我已经关注了github page上的react-router-redux示例，但是当我尝试将{this.props.children}传递给IndexRoute并尝试记录它时，它是未定义的。

我通过控制台获得的唯一错误是Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored，通过Google搜索此错误，这只是其中一个错误，人们说只是忽略它，因为它不会影响任何代码（由于某种原因） ）。

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会成功渲染Headline组件，但不会渲染this.props.children。

Answer 1

在react-router v4中，您不再嵌套路由。

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

考虑到您始终希望显示路线，将路线移至App1Container。然后在App1Container中添加路由，如下所示：

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>