[React] router / Link 태그 / useParams() 사용하기

 

---

 

 

 

◽ 설치하기

npm i react-router-dom@6

 

 

◽ Router 사용하기

📄 index.js

<BrowserRouter> 태그로 감싸준다.

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";

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

예제 1. 

<Routes>
  <Route path='/detail' element={<div>상세페이지입니다.</div>} />
  <Route path='/about' element={<div>소개페이지입니다.</div>} />
</Routes>

 

예제 2.

<Routes>
  <Route path="/" element={
    <>
    <div className="main-bg"></div>
    <div className="container">
      <div className="row">
        { item.map((item, index) => {
          return <Card item={item} key={index}></Card>
        }) }
      </div>
    </div>
    </>
  } />
</Routes>

 

---

 

 

◽ <Link> 사용하기

<Nav className="me-auto">
  <Link to="/">홈</Link>
  <Link to="/detail">상세페이지</Link>
</Nav>

 

---

 

◽ useParam() 사용하기

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

function Detail(props) {

    let { id } = useParams()

    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={`img${id}.jpg`} width="100%" />
                </div>
            </div>
        </div>
    )
}

export default Detail;

 

---

 

출처

React 리액트 기초부터 쇼핑몰 프로젝트까지! - 코딩애플 온라인 강좌