f7프레임워크 동적라우팅 - 상품리스트에서 상세페이지 이동

기존처럼

routes.js에 :id추가

 

index.js에서 하나 만들어줌

 

상품디테일 페이지에서 import 해 주기

import {f7route} from "framework7-react";

api에서 만들어준 getItemDetail import 해 주기

import { getItemDetail } from "../common/api";

 

 

f7route를 받아서

const ItemDetail = (f7route) => {
  const [items, setItems] = useState([]);

  useEffect(() => {
    async function itemList() {
      const resultItems = await getItemDetail(f7route.id);
      setItems(resultItems.data);
    }
    itemList();
  }, []);

 

 

 

상세페이지 눌렀을 때, 각 items id별로 상세페이지 가져와짐 확인

 

 

참고

framework7.io/docs/routes.html

Routes | Framework7 Documentation