[fix] react-router link 버그

[flareseek]

버그 설명

react-router의 Link가 작동하지 않음

버그 발생 경로

App.tsx에 Link 태그 생성해서 테스트 중에 발견했습니다.

원인은 RouterProvider가 root에 있어야 됩니다.

기타사항

RouterPath 부분에

{
    path: "",
    element: <App />,
  }

로 두고

App.tsx 안에
<Main /> 을 호출하는 식으로 해결해야 합니다.

[jjh4450]

헤더 만들면서 라우터 객체를 분리해 관리할 예정입니다.
RouterInfo.ts

import Layout from "./components/Layout/index.tsx";
import Main from "./pages/Main/index.tsx";
import Artist from "./pages/Artist/index.tsx";
import Booth from "./pages/Booth/index.tsx";
import BoothNFoodList from "./pages/BoothNFoodList/index.tsx";
import Foodtruck from "./pages/Foodtruck/index.tsx";
import Makers from "./pages/Makers/index.tsx";
import Map from "./pages/Map/index.tsx";
import Notice from "./pages/Notice/index.tsx";
import QnA from "./pages/QnA/index.tsx";
import Timetable from "./pages/Timetable/index.tsx";

export const RouterInfo = [
    {
        path: "",
        element: <Main />,
        english: "Main",
        korean: "메인",
        expose: true,
    },
    {
        path: "artist/:id",
        element: <Artist />,
        english: "Artist",
        korean: "아티스트",
        expose: false,
    },
    {
        path: "booth/:id",
        element: <Booth />,
        english: "Booth",
        korean: "부스",
        expose: false,
    },
    {
        path: "booth_foodtruck_list",
        element: <BoothNFoodList />,
        english: "Booth & Foodtruck List",
        korean: "부스 & 푸드트럭 리스트",
        expose: true,
    },
    {
        path: "foodtruck/:id",
        element: <Foodtruck />,
        english: "Foodtruck",
        korean: "푸드트럭",
        expose: false,
    },
    {
        path: "makers",
        element: <Makers />,
        english: "Makers",
        korean: "메이커스",
        expose: false,
    },
    {
        path: "map",
        element: <Map />,
        english: "Map",
        korean: "지도",
        expose: true,
    },
    {
        path: "notice",
        element: <Notice />,
        english: "Notice",
        korean: "공지사항",
        expose: true,
    },
    {
        path: "QnA",
        element: <QnA />,
        english: "QnA",
        korean: "QnA",
        expose: true,
    },
    {
        path: "timetable",
        element: <Timetable />,
        english: "Timetable",
        korean: "타임테이블",
        expose: true,
    },
];

export default RouterInfo;

App.tsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Layout from "./components/Layout";
import RouterInfo from "./RouterInfo.tsx";


const RouterPath = RouterInfo.map((info) => {
    return {
        path: info.path,
        element: info.element,
    }
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: RouterPath,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

고려 해야 할 부분이 있을까요?

[flareseek]

헤더 만들면서 라우터 객체를 분리해 관리할 예정입니다. RouterInfo.ts

import Layout from "./components/Layout/index.tsx";
import Main from "./pages/Main/index.tsx";
import Artist from "./pages/Artist/index.tsx";
import Booth from "./pages/Booth/index.tsx";
import BoothNFoodList from "./pages/BoothNFoodList/index.tsx";
import Foodtruck from "./pages/Foodtruck/index.tsx";
import Makers from "./pages/Makers/index.tsx";
import Map from "./pages/Map/index.tsx";
import Notice from "./pages/Notice/index.tsx";
import QnA from "./pages/QnA/index.tsx";
import Timetable from "./pages/Timetable/index.tsx";

export const RouterInfo = [
    {
        path: "",
        element: <Main />,
        english: "Main",
        korean: "메인",
        expose: true,
    },
    {
        path: "artist/:id",
        element: <Artist />,
        english: "Artist",
        korean: "아티스트",
        expose: false,
    },
    {
        path: "booth/:id",
        element: <Booth />,
        english: "Booth",
        korean: "부스",
        expose: false,
    },
    {
        path: "booth_foodtruck_list",
        element: <BoothNFoodList />,
        english: "Booth & Foodtruck List",
        korean: "부스 & 푸드트럭 리스트",
        expose: true,
    },
    {
        path: "foodtruck/:id",
        element: <Foodtruck />,
        english: "Foodtruck",
        korean: "푸드트럭",
        expose: false,
    },
    {
        path: "makers",
        element: <Makers />,
        english: "Makers",
        korean: "메이커스",
        expose: false,
    },
    {
        path: "map",
        element: <Map />,
        english: "Map",
        korean: "지도",
        expose: true,
    },
    {
        path: "notice",
        element: <Notice />,
        english: "Notice",
        korean: "공지사항",
        expose: true,
    },
    {
        path: "QnA",
        element: <QnA />,
        english: "QnA",
        korean: "QnA",
        expose: true,
    },
    {
        path: "timetable",
        element: <Timetable />,
        english: "Timetable",
        korean: "타임테이블",
        expose: true,
    },
];

export default RouterInfo;

App.tsx

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Layout from "./components/Layout";
import RouterInfo from "./RouterInfo.tsx";


const RouterPath = RouterInfo.map((info) => {
    return {
        path: info.path,
        element: info.element,
    }
});

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: RouterPath,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

고려 해야 할 부분이 있을까요?

오 좋네요. routerInfo와 routerPath도 타입관리 해주면 더 좋겠네요

아 그리고 수정사항 하나 더 있는데 router경로관련 변수명은 jsx와 헷갈리지 않게 camelCase로 작성해주세요

[jjh4450]

아 아직 작성 중이라 미쳐 신경 쓰지 못했는데 pr 전에 참고하여 수정하겠습니다.

[flareseek]

#18 에서 해결완료