React-Router外部鏈接

由於我在反應應用程序中使用react-router來處理我的路線，所以我很好奇是否有辦法重定向到外部資源。React-Router外部鏈接

說有人打：

example.com/privacy-policy

我想它重定向到：

example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies

我發現避免在純JS寫它正好爲零幫助我index.html加載類似於：

if (window.location.path === "privacy-policy"){ 
    window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" 
}

來源

2017-03-20 Relic

您正在使用哪種React路由器？ –

我正在使用版本3。x – Relic

我真的結束了建立我自己的組件。 <Redirect> 它需要從react-router元素的信息，所以我可以保持在我的路線。如：

<Route 
    path="/privacy-policy" 
    component={ Redirect } 
    loc="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies" 
    />

這裏是我的組件櫃面，任何人都好奇：

import React, { Component } from "react"; 

export class Redirect extends Component { 
    constructor(props){ 
    super(); 
    this.state = { ...props }; 
    } 
    componentWillMount(){ 
    window.location = this.state.route.loc; 
    } 
    render(){ 
    return (<section>Redirecting...</section>); 
    } 
} 

export default Redirect;

編輯 - 注：這是react-router: 3.0.5，它不是在4.x的那麼簡單

來源

2017-03-23 22:38:55 Relic

等到這樣才能連接到互聯網上的另一個頁面，你必須創建反應組件，我認爲它在1999年做得更好 –

你不必做任何事情，反應是一個框架，並且在框架中有很多價值。這是如何在反應框架內完成的。但是，它並沒有考慮到可以包裝在這裏的瀏覽器歷史記錄模塊，這使得它更加有用。另請注意「window.location」是它在1999年完成的。這只是一種將它添加到路由表中以進行客戶端路由的方法。這不是一個「好」的解決方案。 – Relic

在反應路由器v4中，您可以使用渲染代替組件 – Irrech

我不認爲React-Router提供這種支持。該documentation提到

一個<重定向>重定向設置在您的應用程序另一條路線，以保持舊網址。

你可以嘗試使用像React-Redirect代替

來源

2017-03-20 22:46:00 ytibrewala

好看，謝謝。看到接受的答案（我自己解決） – Relic

-1

東西，如果你正在使用服務器端認定書，您可以使用StaticRouter。用context作爲props，然後在您的應用中添加<Redirect path="/somewhere" />組件。這個想法是每次react-router匹配一個重定向組件，它會在你傳遞給靜態路由器的上下文中添加一些東西，讓你知道你的路徑與重定向組件匹配。現在你知道你打了一個重定向，你只需要檢查你是否在尋找重定向。然後通過服務器重定向。 ctx.redirect('https://example/com')。

來源

2017-03-21 08:16:01

我正在尋求一種方法在客戶端做到這一點。如果正確完成，實際上應該在DNS級別完成。其次將在最初的服務器請求中。由於我在S3上託管，所以沒有服務器端。所以我暫時停滯不前，直到我們的開發人員可以在服務級別進行重定向。 – Relic

你可以做的是，'' –

下面是使用React路由器重定向到外部鏈接的單行程：

<Route path='/privacy-policy' component={() => window.location = 'https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies'}/>

它使用React純組件概念將組件代碼減少爲單個函數，而不是呈現任何內容，將瀏覽器重定向到外部URL。

工程兩者上反應路由器3和4

來源

2017-06-15 09:30:06

這工作，但我正在尋找一個更優雅的可擴展解決方案。看看我想出了什麼，因爲它允許我進一步使用MobileApps等的重定向（Not ReactNative，真正的Native應用程序）。現在我所做的並不是解決我的問題的正確方法，但爲了解決這個問題，我建議你調查我的解決方案，以及除了不同的角度。 – Relic

這應該是一個被接受的答案，更簡單和乾淨。 –

這在我心中並不是那麼幹淨。我寧願誠實地使用錨標籤。其次，點擊瀏覽器上的返回按鈕可返回您重定向到https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies –

沒有必要使用<Link />組分從反應路由器。

如果你想去外部鏈接使用錨標籤。

<a target="_blank" href="https://meetflo.zendesk.com/hc/en-us/articles/230425728-Privacy-Policies">Policies</a>

來源

2017-10-30 21:47:42

OP在詢問如何以編程方式執行，而不是聲明式 – Relic

React-Router外部鏈接

回答

相關問題