反応し、ルータのV4を - 「コンポーネント」属性

Question

使用して、純粋な関数へのparamsを提供するためにどのように次のコードを持っている：

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

しかしESLintが原因である=>、に次の警告を投げているが（私の知る限り）それはすべての呼び出しでrender関数の新しい参照を作成し、私はそれを望んでいないので、悪い習慣です。

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

：矢印機能を使用しないでください

警告JSXの小道具は、私は次のように専用のシンプルなコンポーネントを使用して、これをリファクタリングしようとしている/ JSX-NO-バインドだから、

反応しません

しかし、私はそれを使用する方法を考え出すのに苦労しています。

まず、render属性の代わりにcomponentを使用する必要があると思いますが、私はそれほど確信が持てません。これまでのところ正しいドキュメントが見つかりませんでした。 （編集：ここではhttps://react-router.now.sh/MatchがV4ためのドキュメントです）

私は以下を含むいくつかのことを、試してみましたが、それは動作しません。

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

私は、いくつかの例を見つけましたが、それらのすべては、私はconstはステートレスなコンポーネントのために物事を行うために、新しい「最良の」方法であると思われるので、使用して使用し、むしろないだろうReact.createClassを、使用しています。

---

可能な解決策の1つは、React.Componentを拡張するクラスを使用することです。しかし、それは間違っていると感じます。 （https://react-router.now.sh/Match）

： render方法に関するDOCから

コンポーネントは、純粋な関数として書かれるべき

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

（そしてESLintはエラーそれについてを示しています）

あなたのためにレンダリングされたコンポーネントを持たずに、場所を指定すると呼び出される関数を渡すことができますnは一致します。あなたのレンダリング関数は、コンポーネントに渡される同じ小道具で呼び出されます。 これは、便利なインラインマッチレンダリングとラッピングを可能にします。

でも便利だと思いますが、それでも良い例はありません。

純粋な関数を代わりに使用する方法はありますか？

Answer 1

あなたは近くにいるようですが、それほどではありません。

まず、あなた専用の機能コンポーネントはそうのような小道具の外のparamsを解析する必要があります。

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

*関数の引数にな破壊に注意してください。

第二に、あなたはMatchにコンポーネントを渡すときだけそうのように、参照を渡す：

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

・ホープ、このことができます！

Answer 2

免責事項リアクタールーターv4は依然としてアルファ版であり、APIは依然として流動的です。ここでのアドバイスは、v4が行く方向によっては疑問になるかもしれません。

<Match>でレンダリングされた各コンポーネントには、いくつかの小道具が用意されています。これらは、location,pattern,params,isExactおよびpathnameである。最後の3つは、patternが現在のlocation.pathnameと一致する場合にのみ提供されます。

<Match>のためにレンダリングされるコンポーネントの場合、渡された小道具からparams小道具を分解することができます。

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

あなたはちょうどその<Match>にそのコンポーネントを渡すことができます。

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