useParams를 이용해서 경로에 따른 json파일 fetch

리스트 파일에 있던 이름에 대한 json 파일을 하나씩 만들어 준다.

내용은 이런식으로 넣어주고

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/login-youngseo" element={<Loginyoungseo />} />
        <Route path="/list-youngseo/" element={<Listyoungseo />} />
        <Route path="/list-youngseo/:id" element={<Detailyoungseo />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

경로 설정은 detail 페이지에 “/list-youngseo/:id” id값을 넣어준다. id값마다 다른 페이지가 나온다.

function CommentList(props) {
  const navigte = useNavigate();

  const goToDetail = () => {
    navigte(`/list-youngseo/${props.name}`);
  };

  return (
    <>
      <li>
        <div className="hidden">
          <img src={props.img} alt={props.name} onClick={goToDetail} />
        </div>
        <div className="coffeeName">
          <div onClick={goToDetail}>{props.title}</div>
          <i className={iClass} onClick={changeButton}></i>
        </div>
      </li>
    </>
  );
}
export default CommentList;

detail 페이지가 list에서 이미지나 이름을 누르면 useNavigate() 함수를 이용해서 페이지 이동을 하는데

경로를 커피의 영어 이름으로 설정해줬기 때문에 경로가 http://localhost:3000/list-youngseo/dolceColdBrew 이런식으로 나온다.

const params = useParams();    //useParams를 이용해서 변수 선언
  const [cofffeeDetail, setCoffeeDetail] = useState({    //useState를 이용해서 초기값 설정  
    id: 0,
    imgUrl: "",
    title: "",
    titleName: "",
    name: "",
    nameContent: "",
    nutrition: [],
    product_fator: "",
  });

  useEffect(() => {
    fetch(`/data/kimyoungseo/${params.id}.json`, {  //params.id를 이용해서 경로에 설정되어 있는 id값을 가져온다.
      method: "GET",                              //json파일이름을 커피이름으로 했기 때문에 같은 이름의 json 파일을 불러와서
    })
      .then((res) => res.json())
      .then((data) => {
        setCoffeeDetail(data);  //해당 json 파일의 데이터로 갱신해준다. 
      });
  }, []);

uesParams를 이용해서 변수를 만들고 params.id에는 경로를 설정해줬던 “/list-youngseo/:id” 의 id 부분이 들어가게 되고

list 페이지에서 설정해줬던 http://localhost:3000/list-youngseo/dolceColdBrew 페이지로 이동하고 json 파일도 영어 커피 이름으로 했기 때문에

dolceColdBrew.json 파일을 가져오고 setCoffeeDetail을 이용해서 해당 json 파일에 있는 데이터 값으로 갱신시켜준다.

이제 detail 컴포넌트는 하나지만 경로가 바뀔 때 마다 다른 json 파일을 불러와 다른 데이터가 들어가게 된다.

서로 다른 detail 페이지를 완성시켰다!