routing 의 개념

라우팅은 네트워크에서 경로를 선택하는 프로세스를 말한다.
즉 네트워크의 주소에 맞는 프로세스로 이동시켜주는 작업이다.

react-router-dom

SPA(single page application)을 구현할 수 있게 해주는 패키지

---

라우터 선택

createBrowserRouter

모든 React Router 웹 프로젝트에 권장되는 라우터이며 DOM History API를 사용하여 URL을 업데이트하고 히스토리 스택을 관리한다.

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

const router =createBrowserRouter([{
  path:'/',
  element : <Layout/>
  children:[  
      {
        path:"/",
        element:<Home/>,
      },
      {
        path:"profile",
        element:<Profile/>,
      }
  ]
},
{
  path:'/login',
  element : <Login/>,
},
{
  path:'/signup',
  element:<Signup/>,
}])

...

• Route속성에 중첩된 경로가 있는 객체 의 배열 children

RouterProvider

모든 데이터 라우터 객체는 이 구성 요소에 전달되어 앱을 렌더링하고 나머지 데이터 API를 활성화한다.

function App() {
  const [isLoading,setIsLoading]=useState(true);

  async function init() {
    await auth.authStateReady();
    setIsLoading(false);  
  }
  
  useEffect(()=>{init()},[]);

  return (
   <Wrapper>
    <GlobalStyles/>
    {isLoading ? <LoadingScreen/> :<RouterProvider router={router}/>}
   </Wrapper>
  )
}

• router 속성값에 이전에 선언한 createBrowserRouter로 선언한 변수 router를 넣는다.

---

Router Components

BrowserRouter

깨끗한 URL을 사용하여 브라우저의 주소창에 현재 위치를 저장하고 브라우저의 내장된 기록 스택을 사용하여 탐색한다.

import { BrowserRouter ,Routes,Route} from "react-router-dom";


function App() {

  return (
    <BrowserRouter>
        <Routes>
          <Route/>
        </Routes>
    </BrowserRouter>
  )
}
export default App

---

Components

Link

사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있게 해주는 요소
html의 a태그와 기능이 같음

import { Link, useNavigate } from 'react-router-dom

export default function Signup(){
  ...
  return (
   ...
    <Link to="/login">Do you have an Account?</Link>
    )
}

• to 값은 부모 경로에 상대적으로 해결된다.

Navigate

렌더링될 때 현재 위치를 변경하며 useNavigate를 둘러싼 구성 요소 래퍼이며 props와 동일한 인수를 모두 허용한다.

import { Navigate } from 'react-router-dom';
import { auth } from '../routes/firebase';

export default function ProtectedRoute({children}){
    //  로그인 되어있지 않은 상태
    if(auth.currentUser===null){
        return <Navigate to="/login"/>
    }
    return children;
}

Outlet

하위 경로 요소를 렌더링하려면 상위 경로 요소에서 Outlet을 사용해야 한다.

이를 통해 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있다.
상위 경로가 정확히 일치하면 하위 인덱스 경로가 렌더링이 된다.

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

• Outlet에 url이 /messages일 경우 <DashborardMessages/>가 온다.
• Outlet에 url이 /tasks일 경우 <DashboardTasks />가 온다.

Route

React Router 앱에서 가장 중요한 부분 , 라우터 생성 기능에 전달되는 객체

• path : 경로가 URL, 링크 href 또는 양식 작업과 일치하는지 확인하기 위해 URL과 일치시킬 경로 패턴
• element: 경로가 URL과 일치할 때 렌더링할 React Element/Component입니다.

Routes

앱의 어느 곳에서나 렌더링되는 <Routes> 는 현재 위치의 하위 경로 집합과 일치한다.

<Routes>
 <Route path="/" element={<Dashboard />}>
   <Route
     path="messages"
     element={<DashboardMessages />}
   />
   <Route path="tasks" element={<DashboardTasks />} />
 </Route>

 <Route path="about" element={<AboutPage />} />
</Routes>

위치가 변경될 때마다 <Routes>는 모든 하위 경로를 조사하여 가장 일치하는 항목을 찾고 UI의 해당 분기를 렌더링한다.
<Route> 요소는 중첩된 URL 경로에 해당하는 중첩된 UI를 나타내기 위해 중첩될 수 있다.
상위 경로는 <Outlet>을 렌더링하여 하위 경로를 렌더링한다.

---

hooks

useNavigate

로 이동시켜주켜주는 react-router-dom의 hook

첫번째 인자 : 이동시킬 경로 or 히스토리 스택에 들어가고 싶은 델타를 전달 ex. Nnavigate(-1)은 뒤로 돌아가는것과 같다.

두번째 인자(옵션) : 추후에 알아보겠음

import { useNavigate } from 'react-router-dom';
import { auth } from './firebase'

export default function Home(){
    const navigate= useNavigate();

    function handleLogout(){
        //  로그아웃 
        auth.signOut();
        navigate('/login');
    }
    return   <button onClick={handleLogout}>Sign out</button>
}