React-Router-Dom 사용하기 [React, TypeScript, React-Router-Dom]

 < 내용 > 

• 리액트를 실행하고 react-router-dom을 사용할 수 있다.
• react-router-dom의 outlet 기능을 사용할 수 있다.
  • outlet 기능을 사용하면 부드러운 화면 전환이 가능하다.

 < 목차 > 

1. 리액트 타입스크립트 실행
2. reat-router-dom 설정
3. outlet 설정
4. NavLink를 통한 화면 전환
5. 기타 코드

---

 1. 리액트 타입스크립트 실행 

https://sound-programming.tistory.com/186

리액트 타입스크립트 시작하기 [React, TypeScript, NVM, Prettier]

• 위에 링크를 통해 리액트 타입스크립트를 실행할 수 있다.
• 이후 터미널을 통해 앱을 실행시킬 수 있다.

npm start

• 당연히 react-typescript가 있는 폴더로 이동한 다음 실행해야 한다.
• ls 로 하위 폴더 확인, cd로 해당 폴더로 이동, 상위 폴더로 이동 : cd ..

ls

cd react-typescript

리액트 타입스크립트 처음 실행했을 때

---

 2. React-Router-Dom 설정 

• outlet 폴더를 생성한다.

outlet 폴더 생성

• 아래와 같이 outlet 파일(페이지)를 만든다.
• createBrowerRouter를 사용해서 router를 만든다.
• 요소(element)로 Rootlayout을 사용한다.
• outlet으로 사용할 페이지를 경로와 같이 children에 넣는다.
• RouterProvider 기능을 이용해서 경로와 요소를 제공한다.

import { createBrowserRouter, RouterProvider } from "react-router-dom";

// layout
import Rootlayout from "rootlayout/Rootlayout";

// outlet
import Main from "outlets/main/Main";
import Signup from "outlets/auth/signup/Signup";
import Login from "outlets/auth/login/Login";

// router
const router = createBrowserRouter([
  {
    path: "/",
    element: <Rootlayout />,
    children: [
      { path: "/", element: <Main /> },
      { path: "/signup", element: <Signup /> },
      { path: "/login", element: <Login /> },
    ],
  },
]);

const App: React.FC = () => {
  return <RouterProvider router={router} />;
};

export default App;

---

 3. Outlet 설정 

• Rootlayout 파일로 들어와서 아래와 같이 설정한다.
• Navbar는 고정하기 위해서 Outlet과 다른 위치에 둔다.

import { Outlet } from "react-router-dom";
import classes from "./Rootlayout.module.css";

// 하위 컴포넌트
import Navbar from "navbar/Navbar";

const Rootlayout: React.FC = () => {
  return (
    <div>
      <Navbar />
      <div className={classes.rootlayout}>
        <Outlet />
      </div>
    </div>
  );
};
export default Rootlayout;

---

 4. NavLink를 통한 화면 전환 

화면 전환

• 위와 같은 화면 전환을 위해선 아직 마지막 코스가 남았다.

• NavLink를 가져와서 to라는 params에 경로를 넣어주면 끝

import { NavLink } from "react-router-dom";

---

 5. 기타 코드 

• 대부분의 페이지 형식은 아래와 같다.

import classes from "./Main.module.css";

const Main: React.FC = () => {
  return <main className={classes.main}></main>;
};
export default Main;

• .module.css

.main {
  background-color: aquamarine;
  width: 100%;
  height: calc(100vh - 70px);
}