라우팅, Link, useNavigate

리액트에서 페이지 라우팅을 하기 위해서는 react-router-dom 패키지를 설치해야한다.

 

npm install react-router-dom

 

main.jsx에 RouterProvider를 import해주고 기존의 <App/> 대신 <RouterProvider/>를 넣어준다.

react-router-dom의 createBrowserRouter()를 통해 프로젝트 내의 라우트를 정의해준다.

이를 router 변수에 담아 RouterProvider의 router 속성에 넣어주면 내가 정의해 놓은 라우트에 맞게 페이지가 표시된다.

 

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App'
import './index.css'

// createBrowserRouter()
// 라우트 설정 객체를 만들고 객체를 변수에 저장해서 RouterProvider의 router 속성값으로 넘겨준다.
// 배열안에 모든 라우트를 정의해준다.
// 라우트 정의는 객체로 한다. path 속성에 단일 라우트 경로를 정의한다. element 속성에는 렌더링될 컴포넌트를 정의해준다.
const router = createBrowserRouter([
  { path: '/', element: <App/> }
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
)

 

 

정의하지 않은 라우트로 접속하면 오류가 난다.

 

 

라우트를 설정하면 props 연결이 되지 않아서 기능이 정상작동 되지 않는다. 모달창이라던가..등등

 

 

라우트에 공통 컴포넌트로 헤더를 넣어주려고 한다.

 

이를 위해 routes라는 폴더를 생성하고 RootLayout.jsx파일을 만들어 헤더를 넣어준다.

 

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

// 다른 라우트를 감싸는 라우트
function RootLayout() {
  return (
    <>
      <MainHeader/>
      <Outlet/>
    </>
  );
}

export default RootLayout;

// Outlet : 중첩된 내부 라우트가 실제 렌더링 될 위치를 정해줌

 

그리고 RootLayout 컴포넌트를 라우터에 정의하고 children 속성안에 내부 라우트들을 넣어준다.

RootLayout.jsx에 Outlet을 이용해서 내부 라우트 컴포넌트들의 렌더링 위치를 잡아줘야한다.

 

import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App'
import NewPost from './components/NewPost'
import './index.css'
import RootLayout from './routes/RootLayout'

// RootLayout : 라우트에 공통으로 사용될 컴포넌트, children 속성을 사용하여 내부 라우트 컴포넌트를 넣어준다.
// 이때 내부 라우트들의 렌더링 위치가 정해지지 않아서 보이지 않으므로 <Outlet/> 컴포넌트를 이용해 위치를 잡아준다.
const router = createBrowserRouter([
  { path: '/', element: <RootLayout/>, children: [
    { path: '/', element: <App/> },
    { path: '/new', element: <NewPost/> }
  ]},
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router}/>
  </React.StrictMode>
)

 

App.jsx에 헤더가 하나 더 들어가있어서 두개가 나오고 있다.

 

 

라우트 이동

 

a 태그를 이용해서 해당 라우트로 이동할 수 있다.  하지만 새로고침이 일어나기에 프로젝트의 스크립트를 다시 읽어들여 좋지않다.

Link라는 컴포넌트를 이용해 새로고침 없이 이동할 수 있다.

 

 

useNavigate

 

만약 Link를 사용하지 않고 태그를 그대로 사용하려고 하면 useNavigate() 훅을 이용해 함수로 만들어 사용하면 된다.

아래는 div 태그에 onClick속성으로 라우트 이동 함수를 넣어줬다.

 

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

import classes from "./Modal.module.css"

function Modal({children}) {

  const navigate = useNavigate();

  function closeHandler() {
    navigate('/');
    // 상대경로를 사용할 수도 있다.
  }

  return (
    <>
      <div className={classes.backdrop} onClick={closeHandler}/>
      <dialog open className={classes.modal}>{children}
      </dialog>
    </>

  );
}

export default Modal;