React Router 리액트 라우터 활용편 + { useHistory } 뒤로가기

뒤로가기 버튼을 구현해보자(react-router-dom v5 이상, react v16.3 이상 사용 가능)

 

1. useHistory기능을 사용하기 위해 import 해온다.

import { useParams, useHistory } from 'react-router-dom'; // useHistory 추가

2. useHistory를 변수가 담아준다.

let history = useHistory();

3. goBack() 함수를 실행한다.

<button className="btn btn-secondary" onClick={()=>{ history.goBack() }}>Back to main</button>

---

import React from "react";
import { useParams, useHistory } from 'react-router-dom';

function Detail(props){
    let { id } = useParams(); 
    let matchedItem = props.items.find(function(item){
        return item.id == id;
    });
    let history = useHistory();
    const imgUrl = "../images/img"+ matchedItem.id +".jpg"
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-6">
                    <img src={ imgUrl } width="100%" />
                </div>
                <div className="col-md-6 mt-3">
                    <div className="alert alert-danger">The maximum number of guests is 2 guests. </div>
                    <h4>{ matchedItem.country }, { matchedItem.city }</h4>
                    <h5 className="mb-3"><b>{ matchedItem.price }</b> won</h5>
                    <button className="btn btn-dark">Reservation</button> 
                    <button className="btn btn-secondary" onClick={()=>{ history.goBack() }}>Back to main</button> 
                </div>
            </div>
        </div> 
    )
}

export default Detail;

---

다른 함수 구경하러 가기 ➭

Declarative routing for React apps at any scale | React Router