[React] React Router 리액트 라우터 1

 

☑️BrowserRouter(v5) vs. createBrowserRouter

• BrowserRouter는 버전 5에서 사용
• createBrowserRouter라는 API 버전 6에 등장

☑️Route들이 errorElement를 가지게 된다.

 

 

npm i react-router-dom@6.4

 

---

 

🔎 폴더 및 파일 생성

• src/screens/About.tsx
• src/screens/Home.tsx
• src/components/Header.tsx : 어떤 페이지로 가도 불러올 수 있는 헤더 페이지
• src/Router.tsx

 

 

 

 

---

 

📌 V5. BrowserRouter

//About.tsx

function About() {
  return <h1>About</h1>
}

export default About;

//Home.tsx

function Home() {
  return <h1>Home</h1>
}

export default Home;

//Header.tsx

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

function Header() {
  return (
    <header>
      <ul>
        <li><Link to={"/"}></Link></li>
        <li><Link to={"/about"}>About</Link></li>
      </ul>
    </header>
  );
}

export default Header;

//Router.tsx

import {BrowserRouter, Route, Routes} from "react-router-dom"
import Header from "./components/Header";
import Home from "./screens/Home";
import About from "./screens/About";

function Router(){
  return <BrowserRouter>
    <Header />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </BrowserRouter>
}

export default Router;

• Router안에 Routes를 적어준다.
• Header페이지를 BrouwserRouter안에 넣어야 한다. 
• Header의 Link를 사용하기 위해서는 Router 안에 넣어야한다. 
• Router 밖에서는 Link를 render할 수 없다.

 

//App.tsx

import Router from "./Router";

function App (){
  return <div>
    <Router />
  </div>;
}

export default App;

• App.tsx에 Router를 import

---

 

📌 V6. createBrowserRouter

• JSX컴포넌트를 사용하지 않고도 브라우저를 좀 더 선언적으로 바꿔줌

 

//Router.tsx

import {createBrowserRouter, Route, Routes} from "react-router-dom"
import Root from "./Root";
import About from "./screens/About";
import Home from "./screens/Home";

const router = createBrowserRouter([
  {
    path:"/", //path 지정
    element: <Root />, //Root element를 Render
    children: [
      {
        path:"",
        element: <Home />,
      },
      {
        path:"about",
        element: <About />,
      },
    ]
  }
])

export default router;

• Home화면과 About화면을 render 하는 것이 목표
• path:"/"를 부모요소로 생각
• Home, About은 자식요소로 생각
• router를 array 형식으로 표현할 수 있다. 
• 맨 처음으로 전체 route들의 컨테이너를 만들어 준다.

 

//Root.tsx

import React from "react";
import { Outlet } from "react-router-dom";
import Header from "./components/Header";

function Root (){
  return (
    <div>
      <Header />
      <Outlet />
    </div>
  );
}

export default Root;

• App.tsx는 더이상 Router를 render해주지 않는다.
• App.tsx ➡️ Root.tsx 파일명 변경

 

//index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import router from './Router';



const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <React.StrictMode>
    <RouterProvider router={router}/>
    {/* RouterProvider는 router라고 불리는 prop을 가진다 */}

  </React.StrictMode>
);

• index.tsx 렌더하지 않는 컴포넌트를 제거 (기존 코드 삭제)
• RouterProvider를 렌더 (CreateBrowserRouter 함수를 통해서 만들어 냄)
  ➡️ router라고 불리는 prop을 가진다.

 

---

 

📌 NotFound 페이지 (errorElement가 버전 6에서 추가 됨)

• src/screens/NotFound.tsx

//NotFound.tsx

function NotFound(){
  return <h1>
    404 Not Found.
  </h1>
}

export default NotFound;

 

//Router.tsx

import {createBrowserRouter, Route, Routes} from "react-router-dom"
import Root from "./Root";
import About from "./screens/About";
import Home from "./screens/Home";
import NotFound from "./screens/NotFound";

const router = createBrowserRouter([
  {
    path:"/", //path 지정
    element: <Root />, //Root element를 Render
    children: [
      {
        path:"",
        element: <Home />,
      },
      {
        path:"about",
        element: <About />,
      },
    ],
    errorElement: <NotFound />
  }
])

export default router;

• Root element path에 에러를 추가할 수 있음.
• errorElement는 컴포넌트가 충돌나도 작동.

• http://localhost:3000뒤에 임의적으로 주소를 바꿔주면 에러 메세지가 뜨는 것을 확인할 수 있음.