[React] history 사용하여 component 이동시, 화면은 바뀌지 않고 url만 변경될 때 해결법

현재 쇼핑몰을 만들고 있는데 문제가 생겼다.

만들고 있는 나의 쇼핑몰

Header 부분에 있는 제품 카테고리를 선택하면, 그에 맞는 제품 렌더링 되어야 하는데....

url 만 변경되고 제품 리스트는 그대로 있는 것이 아닌가!..

그래서 부랴부랴 구글에 검색해보니까 나와 유사한 상황이 많았다.

 

수정한 코드

1. Route 변경

[변경전 코드]

변경전에는 Route로 하드코딩을 다 박아뒀었다. (얼마나 무식한 방법이었던가 T_T)

url로 parameter를 변경하기 위해서 다음과 같이 했었는데.. 해당 코드를 다음과 같이 바꾸었다.

// App.js
// =============== 변경전 코드 ===============
<Route exact="exact" path='/ProductList/Outer'>
    <ProductList category="Outer"/>
</Route>
<Route exact="exact" path='/ProductList/Top'>
    <ProductList category="Top"></ProductList>
</Route>
<Route exact="exact" path='/ProductList/Bottom'>
    <ProductList category="Bottom"></ProductList>
</Route>
<Route exact="exact" path='/ProductList/Shoes'>
    <ProductList category="Shoes"></ProductList>
</Route>
<Route exact="exact" path='/ProductList/Bag'>
    <ProductList category="Bag"></ProductList>
</Route>
<Route exact="exact" path='/ProductList/Acc'>
    <ProductList category="Acc"></ProductList>
</Route>

 

[변경후 코드]

// App.js
// =============== 변경후 코드 ===============
<Route path="/ProductList/:category" component={ProductList} />

 

2. parameter 변경

[변경전 코드]

하드코딩으로 path를 박아두었을 땐, productList에 props를 넘겨줬을 때 category 1가지 밖에 없었다.

하지만, 동적으로 url을 변경해주는 코드로 변경했을 때 props는 다음과 같이 history, location, match 3가지가 출력되고 있었다.

function ProductList(props) {

    useEffect(() => {
        const productCategory = {
            category
        };
		...
    }, []);
    return (...);
}

props를 파라미터로 받을 때의 로그

하지만 여전히 헤더에 있는 카테고리를 눌렀을 때 밑에 페이지가 제대로 렌더링되지 않고 있었다.

그래서 다음과 같이 코드를 바꿨다.

 

[변경후 코드]

function ProductList({match}) {

    useEffect(() => {
        const productCategory = {
            category
        };
		...
    }, [match.params.category]);
    return (...);
}

match를 파라미터로 받을 때의 로그

props에서 match로 파라미터를 변경해주고, useEffect의 빈 배열을 match.params.category를 추가하여 카테고리 변경시 페이지가 재렌더링 될 수 있도록 코드를 바꿔주었더니 잘 실행되었다.

 

참고한 사이트

- [React] react-router로 history.push해도 url만 바뀌고, 새로고침은 안되는 문제 해결하기