Question

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

请注意

react-router 3.0.0
react-router-redux 4.0.7
该应用有这些网址
- http://myhost/ =＆gt;主页
- http://myhost/someroute1 =＆gt;第一条路线
- http://myhost/someroute2 =＆gt;第二条路线
- http://myhost/someroute3 =＆gt;第三条路线

现在一切都在内部反应。

路由如下所示：

<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/ =＆gt; http://anotherhost/
http://myhost/someroute1 =＆gt;保持反应路线
http://myhost/someroute2 =＆gt; http://anotherhost/anotherroute5
http://myhost/someroute3 =＆gt;保持反应路线

问题很简单：是否可以用干净的方式替换具有绝对URL的反应路由器路由？

我听说过Redirect和IndexRedirect组件，但我无法弄清楚如何正确使用它，并且，由于缺乏反应/反应路由器，我无法确定是否会有任何危险的副作用（以历史为例）。

Answer 1

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

UserControl

我这样过去了

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但没有成功......

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

Answer 2

使用Route的{{1}}道具代替render。这样，您可以指定要调用的函数，而不是要实例化的组件。在函数中，使用component以老式的方式执行导航：

window.location.href

Answer 3

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

Answer 4

我还没有尝试过，但从语法上来说，你可以这样做：

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

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

4 个答案: