쇼핑몰관련 질문드립니다.

쇼핑몰 만들기 부분을 보고 있는데요,

상품상세페이지 만드는데서 막히네요.

메인에서 제품을 누르면 로그인화면이 뜨고 로그인을 하면 다시 메인으로 가는거까지는 되었는데요,

거기서 다시 목록을 누르면 콘솔창에 해당하는 id정보가 나와야 하는데 App.jsx 에서 에러가 난다고 하는데 그대로 따라한 파일이라 어디가 틀린건지 잘 모르겠네요

import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';

const ProductDetail = () => {
  let {id} = useParams();
  const getProductDetail = async () => {
    let url = `http://localhost:5000/products/${id}`;
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);

  };

  useEffect(()=>{
    getProductDetail(); 
  },[]);

  return (
    <div></div>
  )
}

export default ProductDetail;

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useEffect, useState } from 'react';
import { Routes, Route } from 'react-router-dom';
import ProductAll from './page/ProductAll';
import Login from './page/Login';
import ProductDetail from './page/ProductDetail';
import Navbar from './component/Navbar';
import PrivateRoute from './route/PrivateRoute';


function App() {
  const [authenticate, setAuthenticate] = useState(false);  
  //true이면 로그인이 됨, false이면 로그인이 안됨

  useEffect(()=>{
    console.log('aaa',authenticate);
  },[authenticate]); //값이 바뀔때마다

  return (
    <div>
      <Navbar/>
      <Routes>
        <Route path="/" element={<ProductAll/>}/>
        <Route path="/login" element={<Login setAuthenticate={setAuthenticate}/>}/>
        <Route path="/product/:id" element={<PrivateRoute authenticate={authenticate}/>}/>
      </Routes>
    </div>
  )
}

export default App;

<Route path="/product/:id" element={<PrivateRoute authenticate={authenticate}/>}/>

이부분이 에러가 뜨는거 같아요

안녕하세요, 인프런 AI 인턴입니다. gangsugi님.

상품 상세 페이지 작성 중 Redirect와 관련하여 코드에서 에러가 발생하는 것 같습니다. 현재 PrivateRoute 컴포넌트를 사용해 인증 여부에 따라 페이지 접근을 관리하시고 있는 것 같은데, 특정한 URL 패턴에 따라 다른 컴포넌트를 렌더링하는 방식에서 문제가 발생할 수 있습니다.

확인해야 할 사항:

PrivateRoute 컴포넌트 내부에서의 컴포넌트 렌더링:
PrivateRoute 컴포넌트가 렌더링할 내부 컴포넌트를 Route 태그에서 바깥으로 꺼낸 뒤, PrivateRoute 내부에서 이를 중간에 넘겨주는 방식으로 구현해야 합니다. 이 과정에서 인증 상태에 따라 내부 컴포넌트가 조건부로 렌더링되도록 설정합니다.
ProductDetail 컴포넌트로 전달:
ProductDetail 컴포넌트가 실제로 Route 컴포넌트의 element로 들어갈 수 있도록 설정해야 합니다. 만약 로그인 상태라면 ProductDetail을, 로그인이 안 되어 있을 경우에는 Redirect나 로그인 컴포넌트를 렌더링토록 해야합니다.

아래의 내용들이 기존 코드에서 잘 적용되고 있는지 확인해 보세요. 아래의 URL은 유사한 문제를 다룬 자료입니다.

리액트 라우터의 인증 처리 - Route와 PrivateRoute 설정 - Redirect 처리와 PrivateRoute의 활용에 대해 설명합니다.

참고 코드 예제:

// PrivateRoute.js
import React from "react";
import { Navigate } from "react-router-dom";

const PrivateRoute = ({ authenticate, children }) => {
  return authenticate ? children : <Navigate to="/login" />;
};

export default PrivateRoute;

// App.js의 수정된 부분
<Route path="/product/:id" element={
  <PrivateRoute authenticate={authenticate}>
    <ProductDetail />
  </PrivateRoute>
}/>

이렇게 설정하시면 authenticate 상태에 따라 로그인 검증이 이루어지며, 목표 페이지로 이동하거나 로그인 페이지로 자동 Redirect 됩니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

확인해야 할 사항:

참고 코드 예제: