반응 라우터에서 내 링크 태그 내 페이지

Question

을 변경하지 않습니다 나는 다음과 같은 구조를 가지고 :

<CategoryRecipesList> 
    <Title> Recipes for {this.props.category} </Title> 
    <Mesh> You can also click on : {categoryList.map(el => <Link to={'categories/' + el}>{el}</Link>} </Mesh> 

    <Grid> 
    recipes.map((s, i) => <Card {...s}/>) 
    </Grid> 
</CategoryRecipesList> 

가 나는 category PARAM에 따라 recipes 목록을 페치 CategoryList 구성 요소에 대한 생성자 함수를 가지고 있습니다.

<Link/> 태그를 클릭하면 표제와 URL이 업데이트되지만 격자의 <Card>은 업데이트되지 않습니다.

실마리가 있습니까?

Answer 1

해결책을 찾았습니다. 그리드의 카드가 상위 구성 요소()의 소품에 달려 있다는 점을 고려해야했습니다. 따라서 <Mesh/>에서 URL을 변경하면 ComponentWillReceiveProps(newProps) 메서드를 사용해야하고 this.props.category가 (this.props.category 및 newProps.category)과 비교하여 변경되는지 비교해야합니다. 그렇다면 새로운 카드를 가져 와서 정확히 표시해야합니다. 이제 잘 작동합니다. <CategoryRecipesList> 구성 요소에서

:

componentWillReceiveProps(nextProps) { 
    if (this.props.params.category_type !== nextProps.params.category_type) { 
     this.category = nextProps.params.category_type 
     this.props.fetchRecipesByDevice(this.category) 
    } 
    } 

Answer 2

아마도 Update Blocking입니다. withRouter으로 카드 구성 요소를 포장하십시오.

export default withRouter(Card)