🐾 페이지 이동

애초에 React는 Single Page Application
(html 파일이 하나밖에 없기 때문에)이기 때문에 페이지 이동이라는 개념 자체가
존재하지 않는다. 따라서 주소가 안바뀌고, 뒤로가기 앞으로가기 불가능하다

🐾 React-Router-Dom

페이지 이동효과를 주기위해 자주 사용되는 라이브러리
페이지 이동은 아니고,
단순히 주소에다가 글자를 추가해주고,
뒤로가기(history)에 이전 기록을 추가해주는 방법으로
사용자 입장에서 페이지 이동이 된것 처럼 효과를 낼수있다.

react-router-dom설치(❗️ 라이브러리는 항상 공식문서 확인, 업데이트가 될수있음.)

npm i react-router-dom

🐾 Link 컴포넌트

d02router.js

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

const RouterPage =  () => {

  return(
    <>
      <h1>라우팅</h1>
      <p>리액트에서 라우팅 하는 방법</p>
      {/* <Link to="/abc">소개로 이동</Link> */}
    </>
  );
}

export default RouterPage;

<Link></Link> 태그는 React 에서 사용하는 a태그라고 설명할수있다.

html의 a태그는 절대 리액트에서 사용하지 않는다
a태그의 동작 원리 자체는
href 속성에 있는 주소로 이동을 시켜버리는 행위이기 떄문에, 페이지가 하나밖에 없는 리액트에서는
제대로 동작하지 않는다
👇

Link 컴포넌트 (react-router-dom이 만든,)
 <Link to='경로'>소개로 이동</Link>
  ex)
  <Link to='/about'>소개로 이동</Link>

❗️만약 사용자가,
"소개로 이동"을 클릭하면 브라우저의 주소에다가 /about을 붙여준다, 그리고
기본에 보여줬던 화면은 지워주고, history에 저장한다.
그리고 화면에는 다른 컴포넌트가 렌더링이 된다.

🐾 Routes 와 Route (BrowserRouter)

• 💁🏻‍♀️BrowserRouter 는 History 객체를 생성하고, 초기 위치를 상태로 만들고, URL을 참조한다.

• 💁🏻‍♀️Routes 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.

• 💁🏻‍♀️Route 는 path속성에 경로, element속성에는 컴포넌트를 넣어 준다. 여러 라우팅을 매칭하고 싶은 경우 URL 뒤에 *을 사용하면 된다.

  App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import EmotionComponent from './day03/d01emotion';

function App() {
  return (
    <BrowserRouter >
      <Routes >
        <Route errorElement={<ErrorPage />} path='/' element={<Su />} />
        <Route path='/abc' element={<EmotionComponent />} />
        <Route path='/bbb' element={<RouterPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

✏️ 1. 가장 최상위 컴포넌트(보통은 index.js안쪽이나 app.js)에다

  <BrowserRouter>
    <Routes>
      <Route path='/' element={<컴포넌트/>}/>
      <Route path='/ㅇㅇㅇ' element={<컴포넌트/>}/>
      <Route path='/ㄹㄹㄹ' element={<컴포넌트/>}/>
      <Route path='/ㅈㅈㅈ' element={<컴포넌트/>}/>
    </Routes>
  </BrowserRouter>

✏️ 2. createBrowserRouter([{path:'/', element:<컴포넌트/>}, {}, {}, {}]) 👉 key, value를 넘겨준다.

함수를 직접 사용하여 browserRouter를 직접 만들고 ,
해당 라우터를

<RouterProvider router = {이곳} />

에 직접 넘겨준다

App.js

import Su from './day01/d01MyComponent';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import EmotionComponent from './day03/d01emotion';
import ErrorPage from './day03/d03err';
import RouterPage from './day03/d02router';

const routerrrr = createBrowserRouter([
{path:'/', element:<Su/>, errorElement:<ErrorPage/>},
{path:'/abc', element:<EmotionComponent/>},
{path:'/bbb', element:<RouterPage/>},
]);

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

📍 잘못된 주소를 입력했을때, 에러페이지 (useRouteError)

d03err.js

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

const ErrorPage = () => {
    // 함수 실행 결과는 객체
    // 오류에 대한 다양한 정보들이 들어있는 객체 
    // statusText 혹은 message 등등의 key값이 있는 객체
    let aaa = useRouteError();

    return (
        <div>
            <h1>죄송합니다! 해당 페이지는 찾을 수 없어요</h1>
        </div>
    );
}

export default ErrorPage;