connected-react-router应用程序更新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没有接收路由器属性，因此没有监听路由历史上下文更改。

在connect中使用withRouter，像这样

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

解决了问题。