连接的react路由器应用程序更新url，但不更新组件

Question

我仔细检查了所有的教程和常见问题解答，但似乎不知道问题出在哪里。

完整示例如下：https://stackblitz.com/edit/react-hmuwhx?embed=1&file=App.js

下面是一些感兴趣的代码。感谢帮助！

export const createRootReducer = history =>
combineReducers({
router: connectRouter(history),
ui: uiReducer,
user: userReducer
});
const middlewares = [ReduxThunk];
export const history = createBrowserHistory();
export const store = createStore(
createRootReducer(history),
compose(applyMiddleware(...middlewares, routerMiddleware(history)))
);
<Provider store={store}>
<App history={history} />
</Provider>
export class App extends React.Component {
render() {
return (
<ConnectedRouter history={this.props.history}>
<div className="full-height">
<InitializingContainer>
History length: {this.props.history.length}
<Switch>
<Route exact={true} path="/" component={HomePage} />
<Route path="/test" render={() => <div>Test</div>}/>
</Switch>
</InitializingContainer>
</div>
</ConnectedRouter>
);
}
}
export class HomePage extends React.Component {
render() {
return (
<ul>
<li>You are here: {this.props.match.path}</li>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/test">Test</Link>
</li>
</ul>
);
}
}

Answer 1

问题是InitializingContainer没有接收到Router道具，因此没有监听路由历史上下文的更改。

利用withRouter和类connect

export const InitializingContainer = connect(
mapStateToProps,
mapDispatchToProps
)(withRouter(Initializing));

解决了问题。