[REACT] react router “/” handling

'/' 제거

• react router로 url 조작시 끝에 가끔  '/' 가 붙는 경우가 발생한다. 
• 평상시에는 문제가 되지 않지만 세밀한 path 처리나 외부 라이브러리 가 서로 다르게 인식하는경우
  ex) /home/123 , /home/123/  를 다르게 인식한다.
• 따라서 명시적으로 path 끝에 '/' 가 붙는걸 막는다.

import { useNavigate, useLocation } from 'react-router-dom';

function Component() {
  const navigate = useNavigate();
  const location = useLocation();

  useEffect(() => {
    if (location.pathname.endsWith('/')) {
      navigate(location.pathname.slice(0, -1), { replace: true });
    }
  }, [location.pathname, navigate]);

  // Rest of the component code
}

• useEffect 내에서 뒤에 '/' 가 붙는 지 확인한다.
• 해당 코드는 컴포넌트 최상단에 위치하여 전역에 적용되도록 한다.

---

There might be incorrect information or outdated content.