NextJS: Как отправить данные с одной страницы в функцию getInitialProps другой страницы - PullRequest
Новая
       7

NextJS: Как отправить данные с одной страницы в функцию getInitialProps другой страницы

0 голосов
/ 21 января 2019

Я пытаюсь отправить данные со страницы B (вход в систему) на страницу A (индекс) getInitialProps, так как мне нужен ключ для getInitProps страницы A, чтобы фактически получить реквизиты ...

I 'В настоящее время я пытаюсь сделать это, отправив запрос POST на пользовательский экспресс-маршрут и используя этот маршрут для рендеринга серверной части страницы, чтобы запустить getInitialProps.Но проблема в том, что браузер не будет отображать страницу, даже если он получает встроенную серверную часть.

POST-запрос со страницы входа (происходит на стороне клиента): 

const headers = {'Content-type': 'application/json; charset=UTF-8'}
await fetch(`${getRootUrl()}/loadKey`, {method: "POST", body: JSON.stringify({key}), headers})

Экспресс-маршрут:

server.post('/loadKey', (req, res) => {
    // const {key} = req.body
    // console.log(key)
    next({dev}).render('/') //index page
})

Ключ отлично регистрируется и в терминале nextjs говорит, что страница индекса создается, и запускается getInitialProps, но в браузере ничего не происходит.Нет перенаправления.

Я пытался использовать express.redirect, express.render, и я пытался принудительно перенаправить на стороне клиента, но для первых двух то же самое происходит, когда я использую next.render;страница создается, getInitialProps запускается, но в браузере не происходит переадресация.И когда я принудительно перенаправляю с помощью Link или Router, то getInitialProps индекса не получит ключ, переданный из запроса POST.

Ответы [ 2 ]

0 голосов
/ 22 января 2019

Ваш подход будет работать только для серверных отображаемых страниц (так как вам нужно использовать req), а не для клиентской стороны.Даже если вы работаете один раз, ваша логика может нарушиться, когда вы пытаетесь перейти по этому маршруту, или вы можете получить часть своего приложения в виде SPA, а затем некоторые обновления при посещении этой страницы.

Из следующей документации:

При начальной загрузке страницы getInitialProps будет выполняться только на сервере.getInitialProps будет выполняться на клиенте только при переходе на другой маршрут через компонент Link или с помощью API маршрутизации.

Некоторые возможные решения, которые я использовал в прошлом:

  • Реализуйте свою страницу B как компонент и вызывайте ее со страницы A, если по определенным критериям она соответствует.Страница B не будет иметь getInitialProps, но страница A имеет, и кажется, что вам нужно что-то узнать на странице A getInitialProps, чтобы правильно отобразить страницу B, так почему бы не использовать одну страницу вместо этого?Пользователь не будет знать разницу.

  • Используйте Redux или тому подобное.Вы можете хранить стоимость вашей опоры в магазине, который доступен по всему миру, даже для getInitialProps.Но будьте осторожны!Сохраните ваш реквизит в магазине до того, как попытается получить к нему доступ на странице B. GetInitialProps страницы запускается до HoC.

0 голосов
/ 22 января 2019

Попробуйте это 

server.post('/loadKey', (req, res) => {
    const {key} = req.body
    // Do whatever you need to do
    const actualPage = '/'
    const queryParams = { key }
    next({dev}).render(req, res, actualPage, queryParams)
})

Теперь у вас должен быть доступ к key на странице указателя с помощью реквизита.

...