React / Link to Router 사용법 미니정리

// 리액트 버전 5로 사용할때 Link to Router 사용법
 
//문자열
<Link to="/about">About</Link>
 
// 객체
<Link to={{pathname: "/about", state : {fromDashboard : true}}}> About </Link>
 
// 데이터를 받는 컴포넌트
// v5 에서는 location.state로 접근
 
import {useLocation} from "react-router-dom";
 
function About () {
    const location = useLocation();
    console.log(location.state?.fromDashboard); // true
    return <h1>About</h1>;
}
 
 
// 리액트 버전 6로 사용할때 Link to Router 사용법
 
// v6에서 state 전달
 
<Link to="/about" state = {{ fromDashboard: true }}> About </Link>
 
 
import {useLocation} from "react-router-dom";
 
function About() {
    const location = useLocation();
    console.log(location.state?.fromDashboard); // true
    return <h1>About</h1>;
}
 
 
// 구조 분해 할당
 
import {useLocation} from "react-router-dom";
function About() {
    const location = useLocation();
    const {year, title, summary, poster, genres} = location.state || {};
    
    return(
        <h1>{title}</h1>
        <p>{summary}</p>
        <p>Year: {year}</p>
        <img src={poster} alt={title}/>
        <ul>
            {genres?.map((g, idx) => (
                <li key={idx}>{g}</li>
            ))}
        </ul>
    </div>
    );
}
 

 

 

핵심 차이점

 

- v5 -> to = {{ pathname = '/path', state : {....}}} 

- v6 -> to = "/path" state={{....}} (state를 props로 직접 분리)