본문 바로가기

프론트엔드 공부/react

/:id 페이지에서 location.state로 형제컴퍼넌트에 값 넘겨주기(history사용)

/:id 인 페이지에 location.state.statekey값 넘겨야 할때 !!

(다른페이지에서 최초로 history.push("/subpage/1",{userId:넘겨줄값})

구현할 페이지에서 넘어온 객체({userId:넘겨줄 값})를

하단과 같이 location 을  활용하여 넘기고 넘겨주면 각페이지에서 적용 가능하며, 마지막 결과 페이지에서

다른 페이지로 값을 넘겨줄수도 있다 !
  
  

  //useHistory, useLocation import 해주고
  
  [...]
  const passUserId1 = () => {
    history.push("/sform/1",  특정값 );
  };
    const passUserId2 = () => {
    history.push("/sform/2", location.state);
  };
      const passUserId3 = () => {
    history.push("/sform/3", location.state);
  };
  [...]
  return(
    <div>
    [...]
    <button onClick = {passUserId1}>subpage/1의 버튼</button>
    [...]
    <button onClick = {passUserId2}>subpage/2의 버튼</button> 
        [...]
    <button onClick = {passUserId3}>subpage/3의 버튼</button> 
    
  </div>
  
  )

 

'프론트엔드 공부 > react' 카테고리의 다른 글

react 로 날짜피커 만들기 (스크롤)  (0) 2021.09.14
history.push(경로,{})  (0) 2021.09.07
redux axios redux thunk 예제  (0) 2021.08.26
chart.js 다중차트  (0) 2021.08.25
[react] label htmlFor  (0) 2021.08.12