我希望让这段代码工作,而不是通过redux-router项目中源代码中的文档或示例。 我有这个代码(出于迁移原因,以root in / frontend开头):
class App extends Component {
render() {
const links = [
'/frontend',
'/frontend/season',
'/frontend/episode'
].map(l =>
<p>
<Link to={l}>{l}</Link>
</p>
);
console.log('render');
return (
<div>
<h1>App Container</h1>
{links}
{this.props.children}
</div>
);
}
}
App.propTypes = {
children: PropTypes.node
};
function mapStateToProps(state) {
return {
routerState: state.router
};
}
connect(mapStateToProps)(App);
const rootReducer = combineReducers({
episode,
router: routerStateReducer
});
const store = compose(
reduxReactRouter({ createHistory})
)(createStore)(rootReducer,initialState);
class Root extends Component {
render() {
return (
<div>
<ReduxRouter history={history}>
<Route path="/frontend" component={App}>
<Route name="episode" path="episode" component={EpisodeApp} />
<Route name="season" path="season" component={SeasonApp} />
</Route>
</ReduxRouter>
</div>
);
}
}
React.render(
<Provider store={store}>
{() => <Root/>}
</Provider>
, document.getElementById('root'));
问题是,当我按下链接时没有任何变化,应用程序不会重新渲染其子项,但当我使用浏览器导航来回时,它确实有效。我在哪里搞砸了?
非常感谢!
答案 0 :(得分:1)
更新
替换此行:
<ReduxRouter history={history}>
由此(删除历史对象):
<ReduxRouter>
让它发挥作用,不确定原因。