Question

我有以下服务器代码：

  const store = configureStore({}, history);

  const context: any = { store };

  const app = (
    <Provider store={store}>
      <StaticRouter location={req.url} context={context}>
        <Application />
      </StaticRouter>
    </Provider>
  );
// render app

以及以下客户端连接路由器：

    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Application />
      </ConnectedRouter>
    </Provider>

我可以看到中间件已正确连接，并且history.push方法被称为here。

但是浏览器不会重定向。

什么会导致浏览器无法重定向？

Answer 1

事实证明，我有2个不同的历史记录实例，其中1个在路由器中间件中，另外1个在ConnectedRouter中。

确保它们具有相同的实例，可以解决问题。

我有此文件，可以在需要的地方将其导入：

import { createBrowserHistory } from 'history';
import { createMemoryHistory } from 'history';
import { RouterHistory } from '../types';
const selectedHistory: RouterHistory = typeof window !== 'undefined' ? createBrowserHistory : createMemoryHistory;

export const history = selectedHistory();

然后确保我导入了此文件，并且未制作历史记录的多个副本：

import { history } from '../../routes/history';
//etc.
          <ConnectedRouter history={history}>

ssr时history.push不会导致位置更改

1 个答案: