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

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}>