◆ [프론트엔드 심화]프로젝트 - 동적 UI개발(4) - 라우트 작성

라우트 작성(페이지, 링크를 타고 이동하는 경로)

https://www.npmjs.com/package/react-router-dom

react-router-dom

https://www.npmjs.com/package/@types/react-router-dom

@types/react-router-dom

 

설치

npm install react-router-dom @types/react-router-dom --save

 

App.tsx에서 작성

Home화면과 books페이지로 이동했을때

 

아직 만들지 않은 페이지로 이동했을때

//App.tsx

import Layout from "./components/layout/Layout";
import Home from "./pages/Home";
import { ThemeProvider } from "styled-components";
import { GlobalStyle } from "./style/global";
import { ThemeName, getTheme } from "./style/theme";
import ThemeSwitcher from "./components/header/ThemeSwicher";
import { useContext,  useState } from "react";
import { BookStoreThemeProvider, ThemeContext } from "./context/themeContext";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Error from "./components/common/Error";

const router = createBrowserRouter([
  {
    path:"/",
    element:<Layout><Home /></Layout>,
    errorElement: <Error />,
  },
  {
    path: "/books",
    element:<Layout><div>도서 목록</div></Layout>,
  }
]);

function App() {

  return (
    <>
      <BookStoreThemeProvider>
        {/* ThemeSwitcher에 themeName과 setThemeName을 전달*/}
        <ThemeSwitcher />
            <RouterProvider router = {router} />
      </BookStoreThemeProvider>
    </>
  );
}

export default App;

 

// Error.tsx
import { useRouteError } from "react-router-dom";

interface RouterError{
    stateText?: string;
    message?: string;
}

function Error(){
    const error = useRouteError() as RouterError;

    return(
        <div>
            <h1>오류가 발생했습니다.</h1>
            <p>다음과 같은 오류가 발생했습니다.</p>
            <p>{error.stateText || error.message}</p>
        </div>
    );
}

export default Error;

 

프로젝트 모델 정의

예전에 만들었던 모델을 주요 모델로 나눠서 작성