this.props.children在使用react-router-redux时未定义

Question

我已经在github页面上跟随了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,通过谷歌搜索此错误,它只是其中一个错误,人们说只是忽略它,因为它不会影响任何代码(由于某种原因).

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>