react-router v4 - How to provide params to a pure function using "component" attribute
<p>I have the following code:</p>

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

<p>But ESLint is throwing the following warning due to the <code>=&gt;</code>, which is (AFAIK) a bad practice because it creates a new references of the <code>render</code> function at every call and I don't want that.</p>

<blockquote>
  <p>warning  JSX props should not use arrow functions  react/jsx-no-bind</p>
</blockquote>

<p>So, I'm trying to refactor this using a dedicated yet simple component like:</p>

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

<p>But, I'm having a hard time figuring out how to use it.</p>

<p>Firstly, I think I need to use <code>component</code> instead of <code>render</code> attribute, but I'm not quite sure and I haven't found the right documentation about it so far. (Edit: <a href="https://react-router.now.sh/Match" rel="nofollow noreferrer">https://react-router.now.sh/Match</a> <em>Here is the doc for v4</em>)</p>

<p>I tried several things, including the following, but it doesn't work.</p>

<pre><code>&lt;Match
  pattern="/catalog/:id"
  exactly
  component={DefaultRedirect({ params })}
/&gt;
</code></pre>

<p>I found a few examples but all of them are using <code>React.createClass</code>, which I would rather not use since using <code>const</code> appear to be the new "best" way to do things for stateless components.</p>

<hr>

<p>One possible solution is to use a Class that extends React.Component. But it feels wrong. (And ESLint is showing <strong>errors</strong> about it)</p>

<blockquote>
  <p>Component should be written as a pure function  <code>react/prefer-stateless-function</code></p>
</blockquote>

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

<p>From the doc about the <code>render</code> method: (<a href="https://react-router.now.sh/Match" rel="nofollow noreferrer">https://react-router.now.sh/Match</a>)</p>

<blockquote>
  <p>Instead of having a component rendered for you, you can pass in a function to be called when the location matches. Your render function will be called with the same props that are passed to the component.
  <strong>This allows for convenient inline match rendering and wrapping.</strong></p>
</blockquote>

<p>Maybe convenient, but not considered as a good practice though.</p>

<p>Is there a way to do that using a pure function instead?</p>