reactjs - 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>
    );
  }
}

标签： reactjsreduxreact-reduxreact-routerconnected-react-router

Answer 1

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

使用withRouterwith connectlike

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

解决问题。