connected-react-router 应用程序更新 url 但不更新组件答案

【问题标题】：connected-react-router app updates url but not componentsconnected-react-router 应用程序更新 url 但不更新组件
【发布时间】：2019-05-13 16:45:43
【问题描述】：

我已经仔细检查了所有教程和常见问题解答，但我似乎无法弄清楚我的问题出在哪里。

此处为完整示例：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>
    );
  }
}

【问题讨论】：

请注意，当我用 URL 硬刷新时它可以工作，但在通过 <Link> 导航时不起作用

标签： reactjs redux react-redux react-router connected-react-router

【解决方案1】：

问题是您的 InitializingContainer 没有接收到路由器道具，因此没有监听路由历史上下文的变化。

使用withRouter 和connect 类似

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

解决问题。

【讨论】：