javascript - react-router-redux 重定向到绝对 url

Question

我正在迁移一个 React 应用程序，我正在尝试拆分它。基本上，我想将一些客户端 react 路由重定向到绝对 url(或相对，但至少进行服务器往返，反向代理完成)

注意

• react 路由器 3.0.0
• react-router-redux 4.0.7
• 该应用程序有这些网址
  • http://myhost/ => 主页
  • http://myhost/someroute1 => 第一条路线
  • http://myhost/someroute2 => 第二条路线
  • http://myhost/someroute3 => 第三条路线

现在一切都在 react 中。

路由看起来像这样:

<Provider store={store}>
  <Router history={history}>
    <Route path="/" component={Root}>
      <IndexRoute component={Home} />
      <Route path="/someroute1" component={Route1} />
      <Route path="/someroute2" component={Route2} />
      <Route path="/someroute3" component={Route3} />
    </Route>
  </Router>
</Provider>

目标是重定向，比如说，路由“/”和“/someroute2”到静态 url(服务器 url)。这样:

• http://myhost/ => http://anotherhost/
• http://myhost/someroute1 => 保持 react 路由
• http://myhost/someroute2 => http://anotherhost/anotherroute5
• http://myhost/someroute3 => 保持 react 路由

问题很简单:是否有可能以一种干净的方式替换具有绝对 url 的 React 路由器路由？

我听说过 Redirect 和 IndexRedirect 组件，但我不知道如何正确使用它，而且由于缺少 react/react-router，我不知道是否会有任何危险的副作用(例如在历史上)。

Answer 1

使用Route 的render 属性代替component。这样，您可以指定要调用的函数而不是要实例化的组件。在函数中，使用 window.location.href 以老式方式执行导航:

<Route 
  path="/someroute2" 
  render={() => {
    window.location.href = "http://anotherhost/anotherroute5";
    return null;
  }} 
/>