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

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 ，通过谷歌搜索这个错误，它只是人们说忽略它的那些错误之一，因为它不影响任何代码(出于某种原因)。

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"
...

路由.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>
);

应用程序.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>