react-router-dom

react-router-dom v6 기준으로 router 사용법이 작성되었습니다.

react-router-dom v5 전과 다른 점이 있으니 유의하세요!

package.json 에서 버전 확인 할 것!

설치 방법

	// npm
    npm install react-router
   	
    // yarn
    yarn add react-router

v6 기본 설정 및 간단한 사용 법

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { Coin , BookMark } from "../pages";
import { Nav } from ".";

const Router = () => {
  return (
    <BrowserRouter>
        <Routes>
          <Route path='/*' element={<Movie />} />
          <Route path='/bookmark' element={<BookMark />} />
        </Routes>
    </BrowserRouter>
  );
};

export default Router;

BrowserRouter, Routes, 감싸준 후
Route path 지정후 element에 연결할 page components를 넣어준다.

import styles from './Footer.module.scss'
import { Link } from 'react-router-dom'

const Header = () => (
  <header>
    <nav>
      <ul>
        <li>
          <Link to="/">
          </Link>
        </li>
        <li>
          <Link to="/BookMark">
          </Link>
        </li>
      </ul>
    </nav>
  </header>
)

export default Header

Link 를 사용하여 Route path에 접근 가능하다!

tip: Link는 a태그 속성을 가지고 있다.
css 커스텀시 all:unset을 사용해 기존 브라우저에서 지원하는 스타일을 지우고 작업하자!

	a{
    	all:unset
    }

다음에는 useParam 을 이용한 :id path 사용법을 포스팅 하겠다..