React + React路由器，處理所有鏈接以在新選項卡中打開

Question

我有一個React，Redux和Node項目，它有許多內部和外部鏈接。我想讓它在同一頁面打開內部鏈接，並在新標籤中打開外部鏈接。任何幫助或建議表示讚賞，

Answer 1

外部鏈接應定義爲a元素，而不是Link元素，以便您可以使用target="_blank"在新選項卡中打開鏈接。

Answer 2

您可以創建一個包裝組件，它決定鏈接是否是外部鏈接，並使用合適的道具呈現該元素。

以這種方式實現它可以提高可重用性。

爲什麼可重用性會提高？這裏舉幾個例子：

• 試想一下，在開始的時候，你有20個外部URL和手動管理他們的道具（不含包裝組件）。稍後，您決定爲每個外部網址添加一個新的道具，並且您必須手動將其更改爲20個位置。
• URL來自API響應，您必須將它們列在多個組件中。沒有包裝組件 - 你會重複決定URL是否是外部的邏輯。

下面是一個包裝部件的例子：

// Define the Link wrapper component 
class Link extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      target: props.target || this.getTarget(props.href) 
     }; 
    } 

    getTarget(url) { 
     const siteDomain = 'stackoverflow.com'; 
     const isExternal = (url.indexOf(siteDomain) === -1); 

     if (isExternal) return '_blank'; 

     return '_self'; 
    } 

    render() { 
     const props = Object.assign(this.props, ...this.state); 
     return <a {...props}>{this.props.children}</a> 
    } 
} 

// Use the Link wrapper 
class Example extends React.Component{ 
    render() { 
     return <Link href="http://google.com/">This is an external link</Link> 
    } 
}