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

Question

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

注意

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

现在一切都在反应中。

路由看起来像这样：

<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”重定向到静态 urls（服务器 urls）。这样 :

http://myhost/ => http://anotherhost/
http://myhost/someroute1 => 保持反应路由
http://myhost/someroute2 => http://anotherhost/anotherroute5
http://myhost/someroute3 => 保持反应路由

问题很简单：是否有可能以一种干净的方式用绝对 url ?

替换 React 路由器路由

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

Answer 1

我没试过，但从语法上讲你可以这样做：

<Route 
 path="/someroute2" 
 render={() => <Redirect to="http://anotherhost/anotherroute5" />} 
/>

Answer 2

部分基于@brub 的回答，我找到了一个使用哑组件的解决方案。

import React, { Component } from 'react'

export default class MyRedirectRoute extends Component {
  componentDidMount() {
    window.location.href = //my url here
  }
  render() {
    return null
  }
}

我就这样过去了

<Route path="/someroute3" component={MyRedirectRoute} />

虽然，我仍然不知道一些事情：

这是推荐的解决方案吗？
是否有任何历史副作用？
有没有比 window.location.href 更好的（更多的 react-router）解决方案？我尝试了 this.context.history 但没有成功...

在接受我自己的回答之前，我正在等待反馈/更好的解决方案

Answer 3

您可能不需要为此使用 React Router。使用 <a> 标签的 React Router suggests 的创建者。

Answer 4

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

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

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

react-router-redux redirect to absolute url

javascript

reactjs

routing

react-router

react-router-redux