[React] Link로 파라미터 넘기기

버전

node : 18.7.0

react-router-dom : 6.3.0

 

react-router-dom 버전이 6.x 버전으로 올라가면서 react-router-dom에 사용할 수 있던 Switch를 더 이상 사용할 수 없게 됐다. 그래서 Switch를 대신해 Routes를 사용할 수 있다.

<BrowserRouter>
    <Routes>
        <Route path="/" element={<BoardList />}></Route>
        <Route path="/write" element={<BoardWrite />}></Route>
        <Route path="/detail/:id" element={<BoardDetail />}></Route>
        <Route path="/edit" element={<BoardEdit />}></Route>
    </Routes>
</BrowserRouter>

 

Link로 값 넘기기

페이지 별로 값을 넘겨야 하는 경우가 있다. 그런 경우엔 react-router-dom의 Link를 통해 값을 넘길 수 있다. 값을 react-router-dom의 버전 6버전 이전에는 Link의 속성 중 to 변수안에 지정할 수 있었지만 지금은 state변수가 있어서 state에 넘길 값을 담으면 된다.

<Link to={url} state={{id: item.boardid}}>{item.title}</Link>

• to : 이동할 경로
• state : 이동할 페이지에 넘길 값

 

Link로 넘긴 값 받기

useLocation으로 Link로 넘긴 값을 받을 수 있다. useLocation은 react-router-dom에 있는 걸 사용할 수 있고, useLocation은 함수형 컴포넌트에서 사용할 수 있다. 클래스형 컴포넌트에서는 사용이 안된다.

 

import React, { useState, useEffect } from 'react';
import { useLocation, Link } from 'react-router-dom';

function BoardDetail() {
    const location = useLocation();
    const id = location.state.id;
    const [board, setBoard] = useState([]);

    return (
        <div style={{padding: 15}}>
            <Table>
                <thead>
                    <tr>
                        <th>No.</th>
                        <th colSpan={3}>제목</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{board.boardid}</td>
                        <td colSpan={3}>{board.title}</td>
                    </tr>
                    <tr>
                        <td>내용</td>
                        <td colSpan={3}>
                            {board.content}
                        </td>
                    </tr>
                </tbody>
            </Table>
        </div>
    );
}

export default BoardDetail;