React 라우터

의존성 추가

npm i react-router-dom

App.js

import React from "react";
import BbsList from "./component/bbs/list";
import BbsDetail from "./component/bbs/detail"
import {BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/bbs" Component={BbsList} />
          <Route path="/bbs/:id" Component={BbsDetail} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

• BrowserRouter
  • <Link> 태그를 통해 to 속성에 이동할 경로를 추가하여 이동
  • 링크를 통해 컴포넌트들을 렌더링해주는 역할이기 때문에 새로고침 시 해당 페이지를 찾지 못하는 경우가 생기면 에러 발생
  • HTML5 History API 사용
  • 주로 동적인 페이지 사용
• Routes
  • Route를 감싸주는 컴포넌트, 해당 Route 중에 규칙에 일치하는 라우트 단 하나를 렌더링 해줌
• Route
  • path 경로를 통해 element 속성의 컴포넌트를 넣어 해당 컴포넌트로 이동
  • 여러 경로랑 매칭하고 싶다면 url에 *를, URL 파라미터를 사용하고 싶다면 위와 같이 :를 사용하여 설정

URL 파라미터와 쿼리스트링

bbs/detail.js

import axios from "axios";
import React, { useEffect, useState } from "react";
import { useSearchParams, useParams  } from "react-router-dom";

function BbsDetail() {
	// 쿼리스트링
    const [searchParams] = useSearchParams();
    const bbsId1 = searchParams.get('bbsId1');
    console.log(bbsId1)
    // URL파라미터
    const {bbsId2} = useParams();
    console.log(bbsId2);
}

export default BbsDetail;

URL: /bbs/detail/BBS_000000000000004?bbsId1=bbsNm