[React] 클릭시 url 이동 - useNavigate

프로젝트를 하면서 클릭 시 클릭한 글자의 url로 이동시켜주고 싶었다.

예를 들어, 리엑트를 클릭하면 '리엑트/'로 이동 시켜주고 싶었다.

 

리엑트에서 특정 항목을 클릭했을때 해당 항목의 이름에 따라 URL로 이동하기 위해서는 'react-router-dom의 'useNavigate' 훅을 이용하여 처리할 수 있다. 

 

import { useNavigate } from "react-router-dom"; // useNavigate 훅 임포트

function CategoryList() {
	...
  const navigate = useNavigate(); // useNavigate 훅 사용

	...
    
  const handleClick = (categoryName) => {
    navigate(`/${categoryName}/`); // 카테고리 이름을 URL로 사용하여 이동
  };

  return (
    <Container className="mt-1">
      <Card>
        <Card.Header> 카테고리 목록 </Card.Header>
        <ListGroup variant="flush">
          {categoryList.map((category, index) => (
            <ListGroup.Item
              key={index}
              className="d-flex justify-content-between align-items-start"
              onClick={() => handleClick(category.name)} // 클릭 시 URL로 이동
              style={{ cursor: "pointer" }} // 커서를 포인터로 변경하여 클릭 가능하다는 표시
            >
              <div
                style={{
                  cursor: "pointer",
                  ...(category.done ? DONE_STYLE : null),
                }}
              >
                {category.name}
              </div>
            </ListGroup.Item>
          ))}
        </ListGroup>
      </Card>
    </Container>
  );
}

export default CategoryList;