反應路由器V4 - 如何使用「組件」屬性

提供PARAMS到純函數我有以下代碼：反應路由器V4 - 如何使用「組件」屬性

const CatalogContainer =() => (
    <Match 
     pattern="/catalog/:id" 
     exactly 
     render={({ params }) => (
     <Redirect to={`/catalog/${params.id}/titles`} /> 
    )} 
    /> 
)

但ESLint拋出以下警告由於=>，這是（據我所知）不好的做法，因爲它在每次調用時創建了render函數的新參考，我不想那樣做。

警告JSX道具不應該使用箭頭功能反應/ JSX-沒有綁定

所以，我想重構這個使用專用而又簡單的組件，如：

const DefaultRedirect = (params) => (
    <Redirect to={`/catalog/${params.id}/titles`} /> 
);

但是，我很難弄清楚如何使用它。

首先，我認爲我需要使用component而不是render屬性，但我不太確定，到目前爲止我還沒有找到正確的文檔。（編輯：https://react-router.now.sh/Match這裏是文檔爲v4）

我嘗試了幾件事，包括以下，但它不起作用。

<Match 
    pattern="/catalog/:id" 
    exactly 
    component={DefaultRedirect({ params })} 
/>

我找到了幾個例子，但所有的人都用React.createClass，我寧可不要因爲使用const似乎是新的「最好」的方式爲無狀態組件做事使用。

一個可能的解決方案是使用擴展React.Component的類。但感覺不對。（和ESLint是顯示錯誤它）

元器件應寫爲一個純函數

class DefaultRedirect extends React.Component { 
    render() { 
    const { params } = this.props; 
    return (
     <Redirect to={`/catalog/${params.businessMid}/titles`} /> 
    ); 
    } 
}

大約從render方法該文檔：（https://react-router.now.sh/Match）

您可以傳入一個函數，以便在位置n匹配。你的渲染函數將被傳遞給組件的相同道具調用。 這允許方便的內聯匹配渲染和包裝。

也許很方便，但不被認爲是一個很好的做法。

有沒有辦法使用純函數來做到這一點？

來源

2016-12-28 Vadorequest

看起來像你接近但不完全。

首先，你的專用功能組件應解析PARAMS出來的道具，像這樣：

const DefaultRedirect = ({ params }) => (
    <Redirect to={`/catalog/${params.id}/titles`} /> 
);

*注意函數的參數解構。

其次，當你通過該組件Match只是傳遞引用，就像這樣：

<Match 
    pattern="/catalog/:id" 
    exactly 
    component={DefaultRedirect} 
/>

希望這有助於！

來源

2016-12-28 16:46:15 jamesism

免責聲明反應路由器v4仍然在阿爾法，其API仍然在流動。這裏的任何建議可能會取決於v4的走向。

由<Match>呈現的每個組件都提供了幾條道具。這些是location,pattern,params,isExact和pathname。只有當pattern與當前的location.pathname匹配時才提供後三個。

對於將會渲染爲<Match>的組件，您可以從傳遞給它的道具中解構出params道具。

const DefaultRedirect = ({ params }) => (
    <Redirect to={`/catalog/${params.id}/titles`} /> 
);

然後，您可以將該組件傳遞給<Match>。

<Match 
    pattern="/catalog/:id" 
    exactly 
    component={DefaultRedirect} 
/>

來源

2016-12-28 16:46:14

反應路由器V4 - 如何使用「組件」屬性

回答

相關問題