리액트 라우터

리액트 라우터

• URL을 입력하면 URL에 맞는 페이지를 보여주는것을 라우팅이라고한다.
• 리액트 라우터는 SPA에서 페이지 이동 기능을 수행하기 위해 사용되는 대표적인 라이브러리다.

설치

yarn add react-router-dom 
npm i react-router-dom

//types
yarn add -dev @types/react-router-dom
npm i -dev @types/react-router-dom

 

라우터 구성하기

구성하는 방식은 BrowserRouter방식(6.4v이전)과 createBrowserRouter방식(6.4v이후) 으로 나뉜다.

 

BrowserRouter

function App(){
  return(
    <BrowserRouter>
      <Routes>
        <Route path="/" Component={HomePage} />
        <Route path="/video" Component={Video} />
      </Routes>
    </BrowserRouter>
  )
}

 

 

createBrowserRouter 

function App() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <HomePage />
    },
    {
      path: "/video",
      element: <Video />
    },
  ]);
  return <RouterProvider router={router} />;
}

 

Outlet으로 중첩 라우팅 구성하기

BrowserRouter

function Layout() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  )
}

function App(){
  return(
    <BrowserRouter>
      <Routes>
        <Route element={<Layout />}
          <Route path="/" Component={HomePage} />
          <Route path="/video" Component={Video} />
        <Route/>
      </Routes>
    </BrowserRouter>
  )
}

 

createBrowserRouter 

function Layout() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  )
}

function App() {
  const router = createBrowserRouter([
    {
      path:'/',
      element:<Layout/>,
      children:[
        { index:true, element: <HomePage /> },
        { path: "/video", element: <Video /> },
      ]
    },
  ]);
  return <RouterProvider router={router}></RouterProvider>;
}

 

 

사용해본 Hooks 살펴보기

 

useNavigate()

강제로 페이지를 라우팅 할 때 사용된다.다음과 같은 인수를 받을 수 있다.

• path : 이동할 페이지 경로
• state : 이동할 페이지의 상태
• replace : 기존 페이지를 덮어쓸지 여부 true일 경우 페이지 히스토리를 남기지 않는다.

const navigate = useNavigate();

//로그아웃
const onLogout = ()=>{
  --로그아웃동작
  navigate('/');
}

//state로 임의로 값을 전달할 수 있음
navigate('/signin', {
  state: {
    type: 'back',
  },
})


navigate('/signup/done?success=true', { replace: true })

 

useParams()

:id 경로에 포함된 파라미터를 반환한다.

//라우터
<Route path="/users/:id" component={UserPage} />

//userPage
const {id} = useParams(); //:id값에 지정된 파라미터값을 받아온다.

 

useLocation()

현재 라우팅 정보의 속성을 반환한다. 다음과 같은 속성이 포함된다.

• pathname :현재 주소 경로를 나타낸다.
• state: useNavigate를 통해 전달받은 state를 받을 수 있음
• search :  ?를 포함한 쿼리스트링을 반환
• hash : 주소의 해시(#) 뒤의 값

//navigate를 통해 
navigate('/signin', {
  state: {
    type: 'back',
  },
})

 

<Link>태그

a태그는 페이지를 이동하며 페이지가 새로고침이 된다.

Link태그를 사용하면 페이지 새로고침 없이 이동할 수 있다. 

to속성을 사용하여 라우트 경로를 지정할 수 있다.

<div>
  <Link to="/login">로그인</Link>
</div>