Next.js: 상태를 다음/라우터로 전달할 수 있습니까?

현재로서는 불가능하며 가까운 장래에 지원할 것이라고 생각하지 않습니다.

그러나 이것을 열어서 이것이 정말로 필요한지 봅시다.

쿼리 매개변수를 전달하여 이 작업을 수행해야 한다고 생각합니다.

내 말은 nkzawa가 말했듯이 쿼리 매개 변수를 전달하여 비슷한 것을 얻을 수 있지만 http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed 로 URL을 오염시키지 않고 react-router가 수행하는 것과 같은 상태 전송을 원한다는 것을 의미합니다.

as 를 사용하여 URL을 위장할 수 있습니다.

글쎄요, 하지만 as 을 사용한다면 경로 이름은 props.url.pathname 에 실제 경로 이름을 유지하지 않습니다. 이는 쿼리에 전달할 더 많은 것을 의미합니다. 상태를 전달하는 것은 _cleaner_입니다.

프로젝트를 next.js로 포팅하고 있으며 코드를 리팩토링하여 작동하도록 만든 이후로 큰 호환성 문제가 발생하지 않았습니다. .

귀하의 의견에 감사드립니다.

이 비활성 원인을 닫습니다 👍

이거 올린지 1년 조금 넘었는데 아직도 지원 안되나요?

localStorage, sessionStorage, 변수, Redux 저장소 등에 필요한 상태를 저장한 다음 getInitialProps에서 사용할 수 있습니다(클라이언트 측에서 실행 중인지 확인).

nextjs가 react-router 지원을 시작해야 한다고 생각합니다.

동일한 기능을 원합니다.

이전에는 CRA를 사용하고 있었고 그곳에서 라우트된 구성 요소에 상태를 전송하곤 했습니다. nextjs와 동일한 기능을 원합니다.

@sergiodxa 가 해결 방법에서 제안했지만 라이브러리 지원은 좋을 것입니다.

여기에서도 마찬가지입니다 Router.push() 로 데이터를 전달하고 나중에 withRouter 로 검색할 수 있다면 좋을 것입니다.

동일한 기능을 원합니다. 이에 대한 업데이트가 있습니까?

동일한 기능을 원합니다. 이에 대한 업데이트가 있습니까?

저도 요

이 문제와 관련된 또 다른 질문은 다음과 같습니다.

• Router.push()를 호출할 때 내 URL을 오염시키고 싶지 않고 다음 구성 요소에 상태를 전달하고 싶습니다. 할 수 있는 방법이 있습니까? localStorage 또는 쿠키를 사용하는 것은 React hooks 또는 이전 React 라이프사이클에 의해 직접 제어되지 않기 때문에 나쁜 습관입니다.

클릭 가능한 구성 요소가 있는 시나리오가 있습니다. 클릭하면 세부 정보 페이지가 열립니다. 현재 next.js를 사용하여 프로젝트 ID를 전달한 다음 useEffect 및 axios 호출을 사용하여 세부 정보를 얻을 수 있지만 이미 데이터가 있으므로 해당 페이지로 상태를 보낼 수 있기를 정말로 바랐습니다.

이 있으면 좋을 것입니다.

@sergiodxa 예, 임시 메시지를 전달하는 방법은 여러 가지가 있지만 라우터에 연결하면 전달하는 값의 수명 주기를 관리하기 위해 추가 코드를 작성할 필요가 없다는 장점이 있습니다. 라우터 탐색 이벤트에 연결되며 다른 컨텍스트에서는 사용할 수 없습니다.

예를 들어 내 redux 스토어에 푸시하면 로컬 스토리지에 유지되지 않도록 제외하고 수신 측에서 명확한 메시지 작업도 전달해야 합니다.

쿼리 문자열을 추가하면 책갈피를 사용하고 나중에 돌아올 수 있는 영구 링크가 됩니다.

하지만 router.push 를 통해서만 다음 페이지로 푸시할 수 있고 보상을 할 필요가 없습니다. 값은 해당 컨텍스트에서만 사용할 수 있습니다.

연결 플래시 와 매우 유사

2017년 1월 15일 이후 솔루션이 없습니까?
우리는 그 기능이 필요합니다:

여기에서도 마찬가지입니다 Router.push() 로 데이터를 전달하고 나중에 withRouter 로 검색할 수 있다면 좋을 것입니다.

nextjs에 있으면 좋을텐데

쿼리 매개 변수를 숨기려면 다음과 같이 사용하십시오.

Router.push(`/main?userName=${userName}`, 'main')

메인 페이지보다 url에서 /main 만 볼 수 있고,
console.log(Router.route) 쿼리 표시

pathname: "/main"
query: {userName: "fadsfasd"}
asPath: "main"

네, 사실입니다. Btw 라우터에 두 개의 문자열이 필요하다는 것이 정말 어색합니다. react-router 없이도 아름답게 작동합니다. 왜 그럴까요?

만들고 싶은 분들은 Context Api 를 사용하시면 됩니다.

Next.js는 shallow: true 를 소품으로 전달하는 $ router.push() 를 제공합니다.
그렇게 하는 것이 가장 간단한 상태 관리입니다.
https://nextjs.org/docs/api-reference/next/router#routerpush

이것을 재고하고자 하지만, 예를 들어 히스토리 상태 서버 측에서 액세스할 수 없는 경우 히스토리 상태를 사용하여 사용자가 발에 총을 쏘는 것을 방지하는 방법에 대한 훌륭한 제안이 필요합니다. 예를 들어 수분 문제를 일으키는 것은 매우 쉽습니다.

이것을 다시 여는 것이 이 기능에 대한 RFC를 작성하지 않을 것이라는 의미는 아니며 이 기능을 원하는 사람들에게 달려 있습니다.

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

2년 이상 아직 국가 기능을 기다리는 중입니다.

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

이것은 여전히 ​​내부 상태가 아니며 마스크 기능이 있는 쿼리 문자열입니다. 제 생각에는 이는 상당히 이상한 일입니다.

나는 React 생태계에 익숙하지 않습니다. 하지만 할 수 있을 것 같습니다

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

돌아가서 PopState 전에 확인하면 옵션 소품에 { step: 2 } 가 포함됩니다.

우리는 router 객체에서만 이것을 필요로 합니다.

나는 React 생태계에 익숙하지 않습니다. 하지만 할 수 있을 것 같습니다

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

돌아가서 PopState 전에 확인하면 옵션 소품에 { step: 2 } 가 포함됩니다.

우리는 router 객체에서만 이것을 필요로 합니다.

의도적인 행동이 아니라 또 다른 일시적인 해킹처럼 보입니다. 예상되는 옵션은 문서 에 나열되어 있습니다. 그러나 이와 비슷한 것이 예상대로 행동하는 것이 좋습니다.

@likerRr 분명히 모든 옵션 매개변수가 window.history.state 에 전달되고 있습니다. 내 예를 들면 다음과 같습니다.
window.history.state == { step: 2 }

@likerRr 분명히 모든 옵션 매개변수가 window.history.state 에 전달되고 있습니다. 내 예를 들면 다음과 같습니다.
window.history.state == { step: 2 }

그런 것 같습니다. 어쨌든, 문서화되기 전까지는 prod에서 사용할 수 없습니다. 전달 옵션의 구현은 언제든지 변경될 수 있기 때문입니다. 실망: 히스토리 상태에 대한 또 다른 문제(?)가 지속된다는 점입니다. 그리고 "뒤로"/"앞으로" 버튼을 사용하여 플레이하면 대부분 예기치 않은 동작이 발생합니다.

내가 이해하는 한 커뮤니티가 원하는 사용 사례는 한 페이지에서 다른 페이지로 전환하는 동안에만 남게 되는 데이터를 전달하는 것이며 우리는 그것을 지우는 데 신경 쓸 필요가 없습니다. 그리고 이 데이터는 사용자가 브라우저에서 "뒤로/앞으로"를 클릭할 때 다시 나타나지 않아야 합니다. 그렇지 않으면 이것이 최선의 제안입니다(imo).

다음 js가 이것을 고려한다면 좋을 것입니다.

이것은 나를 위해 일했습니다. 사용할 수 있습니다.
https://github.com/vercel/next.js/issues/771#issuecomment -612018764

1: 구독 페이지에서:
const handleClick = useCallback((마운트) => {
Router.push( /payment?mount=${mount} , '/결제');
}, []);
2: 결제 페이지에서
useEffect(() => {
상수 {
쿼리: { 마운트 },
} = 라우터;
!mount && Router.push('/campaign-overview/subscription');
console.log('PaymentVM:React.FC -> 마운트', 마운트);
}, []);

콘솔 브라우저에서 mount 의 값을 볼 수 있습니다.

나는 문제와 router.push에서 상태를 전달할 수 있다는 편리함을 이해합니다.

다음은 임시 해결책이 될까요?

브라우저의 history.pushState와 위치 문자열의 local useState를 사용하고, 리다이렉트를 하고자 할 때 history.pushState를 사용함과 동시에 새로운 값을 local location state로 설정한다. 위치 문자열 상태에 대한 업데이트는 useEffect 실행을 트리거해야 합니다. 그런 다음 위치를 평가하고 위치를 기반으로 구성 요소를 반환하는 JS switch 문이 있습니다. 그리고 history.pushState 없이 동일한 구성 요소에 도달하려는 경우(예: 사용자가 페이지를 새로 고침하는 경우) 위치를 동적 다음 쿼리 매개변수로 만들 수 있습니다. -- 시도하지 않고 해결 방법을 생각하려고 했습니다.

만들고 싶은 분들은 Context Api 를 사용하시면 됩니다.

Next.js는 shallow: true 를 소품으로 전달하는 $ router.push() 를 제공합니다.
그렇게 하는 것이 가장 간단한 상태 관리입니다.
https://nextjs.org/docs/api-reference/next/router#routerpush

my in my getServerSideProps 에서 두 개의 호출을 하고 그 중 하나는 모든 로드에 대해 다시 실행해야 하고 하나는 조건만 로드해야 하는 경우 어떻게 합니까? 이를 위해 Shallow: true 는 상태 관리자가 아니거나 getServerSideProps 다시 실행하거나 전혀 수행하지 않기 때문에 별로 도움이 되지 않습니다.
이 시나리오의 예는 getServerSideProps 에서 두 개의 개별 호출을 수행하는 경우입니다. 하나는 페이지의 주요 콘텐츠용이고 다른 하나는 탐색 링크를 가져오기 위한 호출입니다. 초기 렌더링에서는 두 호출이 모두 서버에 있기를 원하지만 이미 메모리에 탐색 링크가 있으므로 다시 가져올 필요가 없습니다. 그것이 우리에게 국가가 필요한 이유입니다.

유일한 해결책은 숨겨진 쿼리 매개변수와 함께 as 옵션을 보내는 것이지만 현재 상태가 포함된 쿼리 매개변수 무리를 전달하는 모든 <Link/> 에 대해 코드가 끔찍할 것입니다. (사실, 내가 글을 쓸 때 나는 지정된 href로 이동해야 하고 현재 상태와 함께 쿼리 개체를 보내야 하는 HOC 링크를 만들어 각 <Linke/> 에 상태 개체를 쓸 필요가 없을 것이라고 생각하고 있습니다. HOC에서만 이것을 처리합니다)