programing

리액트 라우터의 링크를 통해 오브젝트 통과

newnotes 2023. 3. 16. 21:48
반응형

리액트 라우터의 링크를 통해 오브젝트 통과

어떤 물체를 통과시킬 수 있습니까?Link컴포넌트가 반응하고 있습니까?

예를 들어 다음과 같습니다.
<Link to='home' params={{myObj: obj}}> Click </Link>

내가 합격하는 것과 같은 방법으로props에서Parent로.Child요소.

이것을 실현하기 위한 최선의 방법은 무엇입니까?
리액트+플럭스 앱이 있어서 데이터를 사용하여 테이블을 렌더링합니다.행 중 하나를 클릭하면 이 행의 상세 컴포넌트가 나타납니다.행에 필요한 데이터가 모두 들어있기 때문에 그냥 통과할 수 있으면 좋겠다고 생각했습니다.Link.

또 다른 옵션은 다음 중 하나를 통과시키는 것입니다.idurl 행의 details 컴포넌트에서 읽고 ID로 스토어에 데이터를 요청합니다.

상기의 달성을 위한 최선의 방법이 무엇인지 잘 모르겠습니다.

그래서 이 질문에 대한 나의 마지막 결론은 내가 제대로 생각하지 못했다는 것이다.제 데이터를 전달해 주는 것만으로Link그래서 내 집에서 접속할 수 있게Child요소.콜린 램지가 언급한 것처럼state에서Link하지만 그건 방법이 아니에요데이터가 전달되면 정상적으로 동작합니다.Link사용자가 무언가를 클릭하여Child요소.

이 문제는 사용자가 에 액세스 할 때 발생합니다.url에 사용되는Link데이터를 얻을 방법이 없습니다.

그래서 제 경우엔 그 문제를 해결하는 게IDLink패러밍을 하고 나서Store데이터(사용자가 액세스)를 가지고 있다.Link)에서 이 데이터를 가져옵니다.Store.

또는 데이터가 에 없는 경우Store를 호출하다actionAPI에서 데이터를 가져옵니다.

개체를 링크를 통해 전달할 수 있습니다.(베스트 프랙티스는 아니지만 가능)

매개 변수가 아닌 쿼리 내에 데이터를 추가하고 개체를 문자열화합니다.

<Link to={{ 
  pathname: `/blog/${post.id}`, 
  query: {
    title: post.title, 
    content: post.content,
    comments: JSON.stringify(post.comments)
  } 
}}>Read More...</Link>

그런 다음 하위 구성 요소에서 문자열을 해석하여 개체로 되돌립니다.

JSON.parse(this.props.comments)

아니요, 개체를 전달할 수 없습니다.params그래서, 나는 당신의 최선의 계획이 ID를 상점에 전달하고, 상점에서 정보를 내보내는 것이라는 당신의 의견에 동의할 것입니다.CHANGE컴포넌트가 스토어에 정보를 문의하도록 합니다.

이것은 불가능합니다. 문자열 ID와 같이 URL에 저장할 수 있는 것을 전달해야 합니다.그런 다음 이 ID를 사용하여 개체 검색을 수행합니다.

수신측에서는, JSON 의 시리얼화를 시도하고 나서, 시리얼화를 해제할 수 있습니다.

react-roter-dom 버전 5.1.2 및 es6 사용

저는 먼저 URL의 일부라는 의미와 북마크 등을 지원한다는 의미로 Link to object 검색 부분에 문제를 해결했습니다.

< Link to={{
          pathname: `${match.url}/${dogName}`,
          search: `choosenDog=${JSON.stringify({ ...dog })}` //dog is the object to pass along
        }
        } >

그리고 링크에서 이렇게 잡았어요

const query = useQuery();
const dogString = query.get('choosenDog');
const dogObject  = JSON.parse(dogString);

언급URL : https://stackoverflow.com/questions/31168014/pass-object-through-link-in-react-router

반응형