this.props.children 使用 react-router-redux 时未定义
this.props.children undefined when using react-router-redux
我遵循 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"
...
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 会成功呈现标题组件,但不会 this.props.children。
在 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>
我遵循 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"
...
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 会成功呈现标题组件,但不会 this.props.children。
在 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>