[React] react-route-dom - Link / Link to

Link 

component를 구성 할 때 a태그에서 href를 사용하면 홈페이지를 새로고침하여 페이지를 로드하게 된다.

하지만 아래의 react-router-dom의 Link를 사용하면 페이지 새로고침 없이 로드할 수 있다.

import { Link } from "react-router-dom";
<Link to="/">Home</Link>

 

해당 기록이 history스택에 저장된다.
* Link태그는 ReactDOM에 의해 a태그로 변환된다
css를 꾸미고싶다면 a태그로 css를 꾸미면 된다.

 

 

해당 이미지 클릭 시 페이지 변경과 함께 데이터를 전달하고 싶다면?

 

function Home({id, name, age, img}){
	return(
    <Link to={{
        pathname: '/product/'+ id,
        state: {
            name,
            age
        }
    }}>
    	<img src={img} alt={img} title={img}>
	</link>
    )
}

이런식으로 Link to 의 pathname property로 이동될 경로를 설정해주고

state property를 통해 데이터를 보내줄 수 있다. 

*기본적으로 {{}} 중괄호 2개를 사용해 주어야 한다.

 

그러면 위 link to는 미리 설정해놓은 Router을 통해서 새로운 페이지(Detail)로 연결된다.

import Detail from "./routes/Detail";
//..중간생략

  <BrowserRouter>
	//..중간생략
    <Route path="/member/:id" component={Detail} />
  </BrowserRouter>

 

 

location state

function Detail(props) {
    console.log(props)
    return(
        <h1>HII</h1>
    )
}

Detail 함수에서 받은 데이터인 props를 console.log에 찍어보면 

 location-state에서 내가 받아온 props의 정보를 볼 수 있다.

 

**하지만 생성한 link를 클릭하는것이 아닌

url로 직접 입력(검색창에 /mamber/detail/:id 를 입력)해서 detail page로 간다면
location-state정보가 undefined가 되는 것을 알 수 있다.

 

link 클릭으로만 접근할 수 있게 설정 하고 싶다면?

 

일단 Detail함수를 class로 변경해주고

componentDidMount(){
    const { location, history } = this.props;
    console.log(this.props);
    if(location.state === undefined){
        history.push("/")
    }
}

(class로 받은 props를 확인하려면 this.props)

 

location이 undefined인 경우 history를 사용하여 "/" (home)으로 redirect해준다.

이런 과정을 통해 다른 경로로 들어온 사람들은 홈으로 보내고
오직 link클릭으로만 접근할 수 있게 설정 할 수 있다.