detailpage 렌더링 에러

[황지은]

선생님의 라우터 강의를 참고하면서 페이지를 연결하던 중 처음엔 작동이 잘 되었으나 tap메뉴를 만들고나서부터
url만 불러와지고 디테일 페이지가 렌더링 되지 않는 에러가 걸렸습니다. 네비게이트 훅도 사용해 봤는데 역시 
작동이 되지 않아 원인을 모르겠어서 질문드립니다.
아래 작성 코드입니다.

app.js
function App(props) {

  return (
    <React.Fragment>
      <div className="App">
        <Header />
        <Routes>
          <Route path="/" exact element={<MainPage />} />
          <Route path="/detail" element={<DetailPage/>} />
          <Route path="/detail/:id" element={<DetailPage items={props.items} />} />
        </Routes>
      </div>
    </React.Fragment>
  );
}

detailpage.js

import React from "react";
import { useParams, Outlet } from "react-router-dom";
import "./style.css"

function
    DetailPage(props) {

       const {id} = useParams();
       const findItems = props.items.find(x => x.id === id);
       console.log(findItems)

    return (
        <React.Fragment>
            <div className="about-container">
                <div className="detail-image">
                    < img src={process.env.PUBLIC_URL + findItems.image}/>
                </div>
                <div className="item-info">
                    <div className="title-wrap">
                        <h4 className="detail-title">{findItems.title}</h4>
                        <p className="discount-rate">{findItems.discount_rate}</p>
                        <p>{findItems.detail_price}<span className="won">원</span></p>
                        <p className="detail-dimmed-price">{findItems.dimmed_price}</p>
                    </div>
                    <dl>
                        <div>
                            <dt>판매단위</dt>
                            <dd>1병</dd>
                        </div>
                        <div>
                            <dt>중량/용량</dt>
                            <dd>200g</dd>
                        </div>
                        <div>
                            <dt>원산지</dt>
                            <dd>상품설명/상세정보 참조</dd>
                        </div>
                        <div>
                            <dt>유통기한</dt>
                            <dd>출고일 기준, 1년 이상 남은 상품을 배송해 드립니다</dd>
                        </div>
                        <div>
                            <dt>상품선택</dt>
                            <dd>2000</dd>
                        </div>
                    </dl>
                </div>
            </div>
        </React.Fragment>
    )
}

export default DetailPage;


mainpage.js

import React, { useState } from "react"
import { Link, useNavigate } from "react-router-dom"

//css
import "./style.css"

//components
import MainSlider from "../../components/slider/Slider"
import Card from "../../components/Card"
import TabContent from "../../components/TabContent"

//data
import itemData from "../../data.json"

function MainPage() {

    const [items] = useState(itemData);
    const navigate = useNavigate();

    const customItems = items.filter(data => data.id < 4);

    return (
        <React.Fragment>
            <MainSlider />
            <section>
                <h2>취향 저격 맞춤 상품</h2>
                <div className="main-container">
                    {customItems.map((data) => (
                        <Link to={`/detail/${data.id}`} key={data.id}>
                            <Card data={data}></Card>
                        </Link>
                    ))}
                </div>
            </section>

            <div className="sub-banner">
                < img src={process.env.PUBLIC_URL + '/image/sub_banner.png'} />
            </div>

            <section>
                <h2>특별한 특가</h2>
                <TabContent items={items} />
            </section>
        </React.Fragment>
    );
}

tabcontent.js

export default MainPage;

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";

//components
import styled from "styled-components";
import Card from "./Card";

const TabMenu = styled.ul`
    display: flex;
    justify-content: center;</pre>
<pre>    .tabButton {
        display: flex;
        width: clac(100% / 3)
        height: 32px;
        margin: 30px 5px 0 5px;
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 30px;
        background-color: rgba(41, 66, 31, 0.45);
        color: #29421f;
        cursor: pointer;
        transition: .2s;
    }</pre>
<pre>    .focused {
        background: #29421f;
        color: #fff;
    }
`

function Tab(props) {

    const [currentTab, clickTab] = useState(0);
    const navigate = useNavigate();

    const timeItems = props.items.filter(data => data.id > 7 && data.id < 16);
    const limitedItems = props.items.filter(data => data.id > 15 && data.id < 24);
    const onlyItems = props.items.filter(data => data.id > 23 && data.id < 32);

    const tabClickHandler = (index) => {
        clickTab(index);
    };

    const tabArr = [
        {
            tabButton: (
                <li className={currentTab === 0 ? "tabButton focused" : "tabButton"}
                    onClick={() => tabClickHandler(0)}>타임특가
            ),
            tabItems: (
                <div className="main-container">
                    {timeItems.map((data) => (
                        <Link to={`/detail/${data.id}`} key={data.id}>
                            <Card data={data}></Card>
                        </Link>
                    ))}
                </div>
            )
        },
        {
            tabButton: (
                <li className={currentTab === 1 ? "tabButton focused" : "tabButton"}
                    onClick={() => tabClickHandler(1)}>한정특가
            ),
            tabItems: (
                <div className="main-container">
                    {limitedItems.map((data) => (
                        <Link to={`/detail/${data.id}`} key={data.id}>
                            <Card data={data}></Card>
                        </Link>
                    ))}
                </div>
            )
        },
        {
            tabButton: (
                <li className={currentTab === 2 ? "tabButton focused" : "tabButton"}
                    onClick={() => tabClickHandler(2)}>루트한정특가
            ),
            tabItems: (
                <div className="main-container">
                    {onlyItems.map((data) => (
                        <Link to={`/detail/${data.id}`} key={data.id}>
                            <Card data={data}></Card>
                        </Link>))}
                </div>
            )
        }];

    console.log(tabArr);

    return (
        <>
            <TabMenu>
                {tabArr.map((tabData, index) => (tabData.tabButton))}
            </TabMenu>
            <div>
                {tabArr[currentTab].tabItems}
            </div>
        </>
    )
};

export default Tab;

[codingapple]

콘솔창에 에러안뜨나 확인해봅시다 
아니면 디테일 페이지에서 props같은것도 잘 들어있나 출력해봅시다

[글쓴이]

글