라우팅

1. 참조 사이트

https://reactrouter.com

Home v6.24.1 | React Router

 

2. 설치

npm install react-router-dom

 

3. App.js 수정

 

import logo from './logo.svg';

import './App.css';

import {createBrowserRouter, RouterProvider} from 'react-router-dom';

const router = createBrowserRouter([

  {

    path:"/",

    element:<div>Hello World</div>

  },

  {

    path:"/xxx",

    element:<div>안녕하세요</div>

  },

]);

function App() {

  return (

    <RouterProvider router={router} />

  );

}

export default App;

이게 SPA,  경로별 다른 결과

 

 

4. 컴포넌트 작성 ( Home.js )

Home.js 컴포넌트

 

import logo from './logo.svg';

import './App.css';

import {createBrowserRouter, RouterProvider} from 'react-router-dom';

import Home from 'react';

const router = createBrowserRouter([

  {

    path:"/",

    element: <Home />

  }

]);

function App() {

  return (

    <RouterProvider router={router} />

  );

}

export default App;

 

 

5. 컴포넌트 간 연결 ( 링크 )

 - 이전 방식은 <a href=" "> 사용했으나

   React에서는 <Link to=" "> 사용함

 

 

a태그, Link태그 차이는

a태그는 새로고침이 된다

 

a태그

 - 전체페이지가 새롭게 랜더링되기 때문에 네트워크 동작이 발생

 

Link 태그 

 - 내부적으로 화면을  랜더링하기 때문에  네트워크 동작이 발생 안됨

 

==> 크롬개발자 도구 Network 항목에서 확인 가능

 

 

6. 메뉴 역할의 컴포넌트 작성

https://reactrouter.com/en/main/start/tutorial#nested-routes

Tutorial v6.24.1 | React Router

 

App.js

 

컴포넌트

 

 

7. 예외처리 ( 404 )

 

 

 

 

8. menu의 링크 활성화

 - 현재는 <Link to=" ">로 사용되어 사용자가 어떤 링크를 선택했는지 모름

 - <NavLink>로 사용하면 className 속성에 자동으로 상태를 제공함.

   이 상태값으로 css 적용할 수 있음

 

 

 

 

9. useNavigate

 

Link와 useNavigate 차이

Link는 path로 정해준 경로 하나만 접근할 수 있고

useNavigate는 함수안에 조건을 달아서 상황에 따라 다른 곳으로 접근이 가능하다

 

 

10. 동적 라우팅 ( 파라미터 전달 방법 )

 

  가. pathVariable 방식

      - url에 포함되어 파라미터 전달

        ex> /users/2

 

           { path: "/users/:id ", }

           useParams( ) 이용         

products

 

App.js

 

 

 

 

 

  나. queryString 방식

     - url에 포함되지 않고 ?key=value 형식이용

        ex> /users?id=2

          { path: "/users " }

          useSearchParams() 이용

 

 

App.js