Next.js: Можно ли передать состояние следующему/маршрутизатору?

В настоящее время это невозможно, и я не думаю, что мы поддержим это в ближайшем будущем.

Но давайте откроем это и посмотрим, действительно ли нам это нужно.

Я думаю, вы должны сделать это, передав параметры запроса.

Я имею в виду, что вы можете добиться аналогичного результата, передав параметры запроса, как сказал nkzawa, но я бы предпочел не загрязнять свой URL-адрес http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed и предпочел бы передачу состояния, как это делает react-router.

Вы можете использовать as , чтобы скрыть URL-адрес.

Ну, я полагаю, что да, но если бы я использовал as , имя пути не сохраняет фактическое имя пути в props.url.pathname, что означает, что в запрос передается больше вещей. Это просто _cleaner_, чтобы передать состояние.

Я переношу проект на next.js и не сталкивался с какими-либо серьезными проблемами совместимости, так как я нашел способы рефакторинга кода, чтобы заставить его работать, это просто неудобство и многословие на данный момент, которые можно улучшить, и вся эта проблема .

Спасибо всем за ваш вклад.

Закрытие этой причины неактивности 👍

Прошло чуть больше года с тех пор, как я поднял эту тему, но это все еще не поддерживается?

Вы можете сохранить любое необходимое состояние в localStorage, sessionStorage, переменной, хранилище Redux и т. д., а затем использовать его в getInitialProps (проверив, работаете ли вы на стороне клиента).

я думаю, что nextjs должен начать поддерживать реактивный маршрутизатор

Я хочу такой же функционал.

Раньше я использовал CRA, и там я отправлял состояние маршрутизируемому компоненту. Я хочу такую ​​же функциональность с nextjs.

Что @sergiodxa предложил в качестве обходного пути, но поддержка библиотеки будет хорошей.

То же самое здесь, было бы здорово, если бы можно было передавать данные с помощью Router.push() и получать их позже с помощью withRouter

Я хочу такой же функционал. Любое обновление по этому поводу?

Я хочу такой же функционал. Любое обновление по этому поводу?

я тоже

Другой вопрос, связанный с этой проблемой:

• Я не хочу загрязнять свой URL-адрес, когда я вызываю Router.push() и хочу передать состояние следующему компоненту. Есть ли способ сделать это? Использование localStorage или cookie — плохая практика, поскольку они не контролируются напрямую перехватчиками React или старым жизненным циклом React.

У меня есть сценарий, в котором у меня есть интерактивный компонент. щелкнув по нему, откроется страница сведений. С текущим next.js я могу передать идентификатор проекта, а затем получить подробности, используя вызов useEffect и axios, но, поскольку у меня уже есть данные, я действительно хотел бы отправить состояние на эту страницу.

Было бы неплохо иметь это.

@sergiodxa Да, есть много способов передавать временные сообщения, но преимущество его привязки к маршрутизатору заключается в том, что нам не нужно писать дополнительный код для управления жизненным циклом значений, которые мы передаем. Они будут привязаны к событиям навигации маршрутизатора и недоступны в других контекстах.

Например, если я отправлю его в свое хранилище избыточности, я должен исключить его сохранение в локальном хранилище, а также отправить действие очистки сообщения на принимающей стороне.

Если я добавлю его в строку запроса, она станет постоянной ссылкой, которую можно использовать в закладках, а затем вернуться к ней.

Но если я могу отправить его на следующую страницу и только на следующую страницу через router.push , мне не нужно делать никаких компенсаций; значение будет доступно только в этом контексте.

Очень похоже на connect-flash

Нет решения с 15 января 2017 года?
Нам нужна эта функция:

То же самое здесь, было бы здорово, если бы можно было передавать данные с помощью Router.push() и получать их позже с помощью withRouter

Было бы неплохо иметь это в nextjs

если вы хотите скрыть параметры запроса, просто используйте так

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

чем на главной странице, вы можете увидеть только /main на URL и
console.log(Router.route) показывает запрос

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

о да, это правда. Кстати, мне кажется очень неудобным, что для маршрутизатора требуются две строки. Без react-router прекрасно работает, зачем это?

Для тех, кто хочет это сделать, вы можете использовать Context Api .

Next.js предоставляет router.push() , передавая shallow: true в качестве реквизита.
Это самое простое управление состоянием.
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, свойство option будет содержать { step: 2 } .

Нам это нужно только в объекте router .

Я не очень хорошо знаком с экосистемой React. Но кажется, что вы можете сделать

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

Когда вы вернетесь и проверите перед PopState, свойство option будет содержать { step: 2 } .

Нам это нужно только в объекте router .

Похоже, это очередной временный взлом, а не преднамеренное поведение. Ожидаемые параметры перечислены в документации . Но что-то похожее на это было бы здорово иметь ожидаемое поведение

@likerRr Очевидно, что все параметры параметров передаются в window.history.state . Итак, на моем примере:
window.history.state == { step: 2 }

@likerRr Очевидно, что все параметры параметров передаются в window.history.state . Итак, на моем примере:
window.history.state == { step: 2 }

Кажется, это так. В любом случае, пока это не задокументировано, его нельзя использовать в проде, потому что реализация параметров передачи может быть изменена в любое время :disappointed: Еще одна проблема (?) с состоянием истории, что оно постоянное. И если вы играете с кнопками «назад» / «вперед», вы в основном получите неожиданное поведение.

Насколько я понимаю, вариант использования того, что хочет сообщество, - это передача данных, которые будут уходить только при переходе с одной страницы на другую, и нам не нужно беспокоиться об их очистке. И эти данные не должны появляться снова, когда пользователь нажимает «назад/вперед» в браузере. В противном случае это лучшее предложение (imo).

Было бы неплохо, если бы следующий js учитывал это

Это сработало для меня, вы можете использовать
https://github.com/vercel/next.js/issues/771#issuecomment-612018764

1: на странице подписки:
const handleClick = useCallback((mount) => {
Router.push( /payment?mount=${mount} , '/платеж');
}, []);
2: на странице оплаты
использоватьЭффект(() => {
константа {
запрос: {монтирование},
} = Маршрутизатор;
!mount && Router.push('/campaign-overview/subscription');
console.log('PaymentVM:React.FC -> mount', mount);
}, []);

вы можете увидеть значение mount в браузере консоли.

Я понимаю проблему и удобство возможности передавать состояние в router.push.

Будет ли следующее временное решение?

Используйте history.pushState браузера, а также локальное useState строки местоположения, и когда мы хотим перенаправить, мы используем history.pushState, а также устанавливаем новое значение для локального состояния местоположения. Обновление состояния строки местоположения должно инициировать запуск useEffect. Затем создайте статус переключения JS, который оценивает местоположение и возвращает компоненты на основе местоположения. И если мы хотим получить тот же компонент без history.pushState (например, если пользователь обновляет страницу), мы можем сделать местоположение динамическим параметром следующего запроса. - не пробовал, просто пытался придумать обходные пути.

Для тех, кто хочет это сделать, вы можете использовать Context Api .

Next.js предоставляет router.push() , передавая shallow: true в качестве реквизита.
Это самое простое управление состоянием.
https://nextjs.org/docs/api-reference/next/router#routerpush

Что если в my in my getServerSideProps я сделаю два вызова, один из которых должен переделываться при каждой загрузке, а один должен загружаться только с условием. Для этого Shallow: true не сильно поможет, потому что это не менеджер состояния, либо переделать getServerSideProps , либо вообще не делать этого.
Примером этого сценария может быть, если я сделаю два отдельных вызова в getServerSideProps . Один для основного содержимого страницы, а затем еще один вызов для получения навигационных ссылок. При первоначальном рендеринге я хочу, чтобы оба вызова были на сервере, но тогда у меня уже есть навигационные ссылки в памяти, поэтому мне не нужно их повторно загружать. Вот почему нам нужно государство.

Единственным решением является отправка параметра as со скрытыми параметрами запроса, но наш код будет ужасен для каждого <Link/> , который мы передаем в связке параметров запроса, содержащих наше текущее состояние. (На самом деле, когда я пишу, я думаю о создании ссылки HOC, которая должна идти по указанному адресу href и отправлять объект запроса с текущим состоянием, поэтому мне не нужно было бы писать объект состояния в каждом <Linke/> , я разберусь с этим только в HOC)