라우트 설정 오류 해결 기록 참고

주어진 코드에서 수정해야 할 부분은 /editmenu 경로에 대한 라우트 설정입니다. 현재 코드에서는 /editmenu 경로만을 다루고 있으며, 동적인 상품 ID를 전달할 수 있는 기능이 없습니다.

/editmenu 경로에 동적인 상품 ID를 전달하려면 :productId와 같은 매개변수를 사용하여 경로를 정의해야 합니다. 따라서 App.js 파일의 해당 부분을 아래와 같이 수정해야 합니다:

 

import React from 'react';
import { Routes, Route } from "react-router-dom";
import styled from "styled-components";
import { useLocation } from 'react-router-dom';

// import 문 생략...

const PageLayout = styled.div`
  display: flex; 
`;

const Content = styled.div`
  flex-grow: 1; 
`;

function App() {
  const location = useLocation(); // 현재 위치 정보 알려줌.

  return (
    <PageLayout>
      {location.pathname !== '/' && <Sidebar />} {/* 로그인 페이지가 아닐 때만 Sidebar 렌더링 */}
      <Content>
        <Routes>
          <Route path="/" element={<LogIn />} />
          <Route path="/cleaningmode" element={<CleaningMode />} />
          <Route path="/menumanagement" element={<MenuManagement />} />
          <Route path="/addmenu" element={<AddMenu />} />
          {/* /editmenu/:productId 경로 추가 */}
          <Route path="/editmenu/:productId" element={<EditMenu />} />
        </Routes>
      </Content>
    </PageLayout>
  );
}

export default App;