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没有收到路由器道具，因此没有在听路由历史上下文的更改。

与withRouter一起使用connect

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

解决了问题。

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

1 个答案: