如何在 SSR 中获取 react-router-redux redirect URL

Question

我正在使用 react-router-redux@5.0.0-alpha.9，但我还没有找到在服务器端渲染上捕获 <Redirect> URL 的解决方法。

用例：

未识别的用户尝试访问安全路由，<Redirect> 将用户发送到登录路由。
已经登录的用户尝试访问登录表单，<Redirect> 将用户发送到主要的专用路由。

现在重定向正在浏览器中进行，但最好能提供一种方法来捕获 <Redirect> URL 并从服务器发送正确的重定向。

我很想做类似于 <StaticRouter> 解决方案的事情（使用 context 和 <ConnectedRouter>）

import { ConnectedRouter } from 'react-router-redux';

const context = {};
const app = renderToString(
  <Provider store={store}>
    <ConnectedRouter history={history} isSSR context={context}>
      <Application />
    </ConnectedRouter>
  </Provider>
);

if (context.url) {
  const HTTP_FOUND = 302;

  res.writeHead(HTTP_FOUND, { Location: context.url });
  res.end();
}

我也试过 history.listen 但它没有触发位置更改。

import { ConnectedRouter } from 'react-router-redux';
import createHistory from 'history/createMemoryHistory';

const context = {};
const history = createHistory({
  initialEntries: [req.url], // req.url comes from express server
  initialIndex: 0,
});

history.listen(location => {
  // this gets never called
  console.log('History changed!', location);
});

const app = renderToString(
  <Provider store={store}>
    <ConnectedRouter history={history} isSSR>
      <Application />
    </ConnectedRouter>
  </Provider>
);

Answer 1

history.listen 未触发，因为 <Redirect> 组件在 SSR 期间在服务器上使用并与 ConnectedRouter 一起使用时不会执行任何操作，因为 ConnectedRouter 未提供所需的 staticContext.

请查看 https://github.com/ReactTraining/react-router/pull/5323 进行讨论。

似乎正确的解决方案是在 SSR 期间根本不使用 ConnectedRouter，而是使用 StaticRouter 并调度您自己的初始 LOCATION_CHANGE 操作以使商店同步与当前位置。

有关此内容的详细评论，请参阅 https://github.com/ReactTraining/react-router/issues/5333#issuecomment-315737132。

如何在 SSR 中获取 react-router-redux redirect URL

How to get react-router-redux redirect URL in SSR

history.js

redux

react-router-redux