반응 라우터의 V4를 - "구성 요소"속성

Question

사용하여 순수 함수 PARAMS를 제공하는 방법은 다음과 같은 코드가 있습니다

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

그러나 ESLint 인해입니다 =>에 다음과 같은 경고를 던지고을 (AFAIK) 나쁜 습관은 모든 호출에서 render 함수의 새로운 참조를 만들기 때문에 나는 그것을 원하지 않는다.

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

: 화살표 기능을 사용하지 않아야합니다

경고 JSX 소품, 나는 같은 전용 아직 간단한 구성 요소를 사용하여이 문제를 리팩토링하기 위해 노력하고있어/jsx 노 바인드 그래서

반응하지

그러나, 나는 그것을 사용하는 방법을 알아내는 데 어려움을 겪고 있습니다.

첫째, render 속성 대신 component을 사용해야한다고 생각합니다. 그러나 확실하지는 않지만 지금까지 올바른 문서를 찾지 못했습니다. (편집 : https://react-router.now.sh/Match여기 v4에 대한 문서입니다)

다음을 포함하여 여러 가지를 시도했지만 작동하지 않습니다.

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

나는 차라리 const가 상태 구성 요소에 대한 일을 할 수있는 새로운 "최고"방법이 될 것으로 보인다 사용하기 때문에 사용하지 않을 몇 가지 예 그러나 그들 모두가 React.createClass를 사용하는을 발견했다.

---

한 가지 가능한 솔루션은 React.Component를 확장하는 클래스를 사용하는 것입니다. 그러나 그것은 잘못 느낀다. (https://react-router.now.sh/Match)

다음 render 방법에 대한 문서에서

성분이 순수 함수로서 기록되어야

react/prefer-stateless-function

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

(그리고 ESLint은 에러 그것에 대해 보이고있다)

구성 요소를 렌더링하는 대신에 locatio가 호출 될 때 호출 할 함수를 전달할 수 있습니다 n은 일치합니다. 렌더링 함수는 구성 요소로 전달되는 것과 동일한 소품으로 호출됩니다. 이렇게하면 편리하게 인라인 매치 렌더링 및 줄 바꿈이 가능합니다.

그래도 편리 할 수도 있지만 그래도 좋은 실행으로 간주되지는 않습니다.

순수한 함수를 대신 사용하는 방법이 있습니까?

Answer 1

가까이에 있지만 매우 유사하지 않은 것처럼 보입니다.

먼저, 전용 기능 컴포넌트는과 같이 소품에서 PARAMS을 구문 분석해야합니다

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

*

함수 인수의 destructuring을합니다. 당신이 너무처럼 참조를 전달 Match에 구성 요소를 통과 할 때

둘째 :

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

희망이 도움이!

Answer 2

면책 조항 React Router 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} 
/>