route로 상세정보 기능

route props: 라우팅 대상이 되는 컴포넌트에 넘겨주는 기본 props

route props 이해

state가 undefineded다

reacr-router-dom 에서 Route컴포넌트가 그려줄 컴포넌트에 전달한 props

function Navigation(){
    
    return(
        <div className="nav">
            <Link to="/">Home</Link>
            <Link to={{pathname: '/about', state:{fromNavigation:true}}}>About</Link>


        </div>

    );
}

pathname: url
state : 보낼 데이터

영화 상세 정보 데이터 전송

Detail.js

import React from 'react'

function Detail(props){
    console.log(props)
    return <span>hello</span>
}
export default Detail

Detail 컴포넌트를 만들고 props를 콘솔에 띄어준다.

HashRouter안에 Router 설정도 해준다.(import Detail from './routes/Detail';)

movie.js 에서 Link를 import하고
Link to를 이용해서 props를 보낸다 {path와,state}

그러나 직접 주소를 입력할 시 props가 넘어가지 않기에
이를 방지 해줘야 한다.

리다이렉트

1. datail 컴포넌트 클래스형 컴포넌트로 변경
   (componentDidMount()생명주기 함수를 통해 마운트 될때 push(지정한 url로 보내줌) 함수 실행

import React from 'react';

class Detail extends React.Component {
    componentDidMount(){//카멜표기
        const {location,history}=this.props;//location과 history 구조분해할당으로 얻음
        if(location.state===undefined){//state가 넘어오지 않았다면 ==클릭으로 온게 아니라 주소치고 왔다면
            history.push('/'); // 기본 화면으로 돌려보냄
        }

}
render(){
    return <span>hello</span>
}
}

export default Detail;

이제 title을 띄워보자

클릭 후 접속 후 링크로 재접속했을때도 고려해서 if문으로 담아준다.

render(){
    const {location} = this.props;
    if(location.state){
        return <span>{location.state.title}</span>
    }else{
        return null;
    }
 
}
}

export default Detail;

return <span>{location.state.title}</span>

잘뜬다.

끝