react-router (2) 썸네일형 리스트형 [React Router] 리액트 라우터의 URL 파라미터 사용 시 404 오류 해결 방법 (React Router v5, webpack과 함께 사용할 경우 publicPath설정) 문제 상황 상품 리스트 페이지 개발 중, 카테고리번호 별로 다른 상품리스트를 렌더링 하기 위해 리액트 라우터의 URL 파라미터를 사용했는데 같은 방식으로 파라미터를 사용하던 다른 프로젝트에선 볼 수 없었던 아래와 같은 404 오류가 떴다. /categories 까지는 오류 없이 페이지가 잘 나타났지만 /categories 뒤에 '/'와 함께 파라미터를 붙이거나 '/'만 붙여도 해당 오류가 발생했다 해결 방법 이전 프로젝트들에서는 마주친 적 없던 오류였고, 공식문서를 봐도 리액트 라우터의 URL 파라미터 사용법엔 문제가 없었기 때문에 프로젝트 자체의 환경설정 부분이 잘못되었을 확률이 높았다. 관련 키워드로 열심히 검색해본 결과 웹팩에서 사용하는 HtmlWebpackPlugin에 publicPath가 설정되.. [React] react-router history.push 해도 url만 바뀌고, 새로고침은 안 되는 문제 해결하기 현재 개발중인 프로젝트에서 history.push 로 url을 이동했는데도 페이지가 refresh 되지 않는 오류를 겪었다. 현재 경로 '/product/과학/' 에서 왼쪽 메뉴의 다른 카테고리 버튼을 눌러 '/product/${이동할 카테고리}' 경로로 이동하는 방식이다. import { useHistory } from "react-router-dom"; const menuClickHandler = (category) => { history.push(`/product/${category}`); }; history.push로 이동하는 위 함수를 카테고리 메뉴 아이템의 onClickHandler로 지정해두었다. import React, { useEffect } from "react"; import { us.. 이전 1 다음
