react-router-dom 사용법

react-router-dom

페이지 나누는법 (리액트 미사용)

1. html 파일 만들어서 상세페이지 내용 채움
2. 누가 /detail 접속하면 html 파일 보내줌

페이지 나누는 법 (리액트 사용)

index.html 만 사용

1. 컴포넌트 만들어서 상세페이지 내용 채움
2. 누가 /detail 접속하면 그 컴포넌트 보여줌

라우터 설치해야함

npm install react-router-dom@6

설치 후 index.js파일로 이동

아래와 같이 <BrowserRouter> 이 태그로 app 파일 감싸면 된다.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

또한 이렇게 import 해야한다.

import App from './App' 이런거는 경로라서 안에 파일이다. 그외에는 라이브러리이다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

그리고 app.js로 돌아와 아래와 같이 입력

import { Routes, Route, Link} from 'react-router-dom'

라우터로 페이지 나누는 법

Route가 페이지라고 생각하면 됨 2개 만들고 싶다. 그러면 아래와 같이 2개 생성

<Routes>
        <Route path='/detail' element={<div>상세페이지임</div>} />
        <Route />
      </Routes>

위와 같이 path=’/datail’로 입력해서 사이트 뒤에 /detail을 입력해서 들어가면 상세페이지임이 보임

아래는 메인페이지임 / 후 아무것도 입력 안하면 메인으로 들어감

<Route path='/' element={<div>메인페이지임</div>} />

페이지 이동 버튼

<Link to="/">홈</Link>
      <Link to="/datail">상세페이지</Link>

아래와 같이 입력

<Routes>
        {/* -----------------이 페이지 접속하면 메인 보여줌 --------------------- */}
        <Route path='/' element={
	          <>
            <div className='main-bg' style={{ backgroundImage: 'url(' + bg + ')' }}></div>

            <div className="container">
              <div className="row">
                {shoes.map((a, i) => {
                  return <Card shoes={shoes[i]} i={i}></Card>
                })}
              </div>
            </div>
          </>

        } />