• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

동적경로 사용 오류

24.06.13 11:04 작성 조회수 101

0

안녕하세요. Route 부분에 오류가 생겼는데 어떤 부분이 잘못되었는지 모르겠어서 질문 남깁니다.

Route 함수에 path 경로를 설정할 때, 동적경로를 설정하고 싶으면 ":"과 함께 파라미터의 값을 적어주는 것으로 압니다. 강사님께서 적은 코드와 제 코드가 다른 점이 없는데, 저는 해당 url에 접근했을 때 url경로에 ':'이 포함되어서 나옵니다. 구글링+gpt를 사용해서 해당 오류를 고치려고 해보았지만 찾을 수 없는 상태입니다.

 

어떤 부분이 문제일까요?

 

import "./App.css";
import { useReducer, useRef, createContext } from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./Pages/Home";
import New from "./Pages/New";
import Diary from "./Pages/Diary";
import Edit from "./Pages/Edit";
import Notfound from "./Pages/Notfound";

function reducer(state, action) {
  switch (action.type) {
    case "CREATE":
      return [action.data, ...state];
    case "UPDATE":
      return state.map((item) =>
        String(item.id) === String(action.data.id) ? action.data : item
      );
    case "DELETE":
      return state.filter((item) => String(item.id) !== String(action.data.id));
    default:
      return state;
  }
}

const mockData = [
  {
    id: 1,
    createdData: new Date("2024-06-12").getTime(),
    emotionId: 1,
    content: "1번 일기 내용",
  },
  {
    id: 2,
    createdData: new Date("2024-06-11").getTime(),
    emotionId: 2,
    content: "2번 일기 내용",
  },
  {
    id: 3,
    createdData: new Date("2024-05-11").getTime(),
    emotionId: 3,
    content: "3번 일기 내용",
  },
];
export const DiaryStateContext = createContext();
export const DiaryDispatchContext = createContext();

function App() {
  const [data, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(3);
  // 새로운 일기 추가
  const Create = (createdData, emotionId, content) => {
    dispatch({
      type: "CREATE",
      data: {
        id: idRef.current++,
        createdData,
        emotionId,
        content,
      },
    });
  };

  // 기존 일기 수정
  const Update = (id, createdData, emotionId, content) => {
    dispatch({
      type: "UPDATE",
      data: {
        id,
        createdData,
        emotionId,
        content,
      },
    });
  };

  // 기존 일기 삭제
  const Delete = (id) => {
    dispatch({
      type: "DELETE",
      data: {
        id,
      },
    });
  };

  return (
    <>
      <DiaryStateContext.Provider value={data}>
        <DiaryDispatchContext.Provider value={{ Create, Update, Delete }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/new" element={<New />} />
            <Route path="/diary/:id" element={<Diary />} />
            <Route path="/edit/:id" element={<Edit />} />
            <Route path="*" element={<Notfound />} />
          </Routes>
        </DiaryDispatchContext.Provider>
      </DiaryStateContext.Provider>
    </>
  );
}

export default App;

답변 2

·

답변을 작성해보세요.

0

안녕하세요 이정환입니다.

살펴보니 App.js의 코드에는 문제가 없어보입니다. 혹시 브라우저 경로에 :이 포함된 채로 나타난다는 말씀이 구체적으로 어떤 상황인지 스크린샷 등의 수단을 통해 더 자세한 정보를 받아볼 수 있을까요?

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.06.13

안녕하세요, 인프런 AI 인턴입니다. focus0007님의 동적 경로 사용 오류를 다루는 문제에 대해 접근해보겠습니다. 해당 문제는 <Route> 컴포넌트에서 동적 경로를 설정할 때 발생하는 것으로 보입니다. focus0007님의 설명에 따르면, ':'이 경로에 포함되어 나타난다고 하셨는데, 이는 동적 경로를 올바르게 설정했음에도 문제가 생겼음을 의미합니다.

focus0007님께서 제공하신 코드를 살펴보았을 때, 동적 경로 설정 방식이 정상적으로 보입니다:

<Route path="/diary/:id" element={<Diary />} />
<Route path="/edit/:id" element={<Edit />} />

이 코드는 <Diary/><Edit/> 컴포넌트에 대해 동적 경로 파라미터 id를 사용하고 있습니다. 이 문법은 React Router v6에서 동적 경로를 설정하는 표준 방식입니다. 따라서 문제는 경로 설정 방식 자체에는 없어 보입니다.

문제의 원인이 경로 설정에 있는 것이 아닌 경우, 문제가 발생하는 정확한 상황을 파악하기 어렵습니다. ':'이 URL에 그대로 나타나는 문제는 일반적으로 발생하지 않는 현상이며, 이는 브라우저에서 URL을 잘못 인식하거나, 어딘가에서 경로를 잘못 구성하고 있을 가능성이 있습니다.

질문하신 내용에 바로 적용할 수 있는 유사한 답변이나 문제의 명확한 해결책을 찾지 못했습니다. 오류 메시지나, ':'이 URL에 포함되어 나타나는 정확한 상황에 대한 추가 정보가 없어, 구체적인 해결 방법을 제시하기 어렵습니다.

그러나, 동적 경로 설정에 관련된 문제라면, 내용에 가장 가까운 유사한 질문으로는 다음과 같이 <BrowserRouter> 사용에 관련된 문제들을 찾을 수 있습니다:

이정환 강사님의 답변에 따르면, BrowserRouter로 감싸지지 않은 자식 컴포넌트에서 React Router의 기능을 사용하려고 할 때 발생하는 오류에 대해 설명하고 있습니다. 비록 이 상황이 focus0007님의 문제와 정확하게 일치하지는 않겠지만, 라우터 설정과 관련된 오류를 해결하는 데 도움이 될 수 있습니다.

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

채널톡 아이콘