Блог

Я следую этому руководству, чтобы узнать, как реализовать вход с помощью кнопки Google (вместе с помощью Strapi. Руководство отлично работает с Reactjs.

Проблема возникает, когда я пытаюсь сделать то же самое с Nextjs с этой частью кода:

 import React, { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import axios from 'axios'

function GoogleAuthCallback() {
  const [auth, setAuth] = useState()
  const location = useLocation()
  useEffect(() => {
    if (!location) {
      return
    }
    const { search } = location
    axios({
      method: 'GET',
      url: `http://localhost:1337/auth/google/callback?${search}`,
    })
      .then((res) => res.data)
      .then(setAuth)
  }, [location])

  return (
    <div>
      {auth amp;amp; (
        <>
          <div>Jwt: {auth.jwt}</div>
          <div>User Id: {auth.user.id}</div>
          <div>Provider: {auth.user.provider}</div>
        </>
      )}
    </div>
  )
}

export default GoogleAuthCallback
 

Я получаю следующую ошибку:

**Вопрос: есть ли способ извлечь то, что находится в строке местоположения в Nextjs, потому useLocation() что не работает.

Спасибо!

Я предполагаю , что useLocation() попытаюсь получить доступ window.location , который не определен в SSR. Вы должны динамически импортировать свой компонент с отключенным SSR : например, на своей странице :

 import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/GoogleAuthCallback'), // <- path of your component
  { ssr: false } 
) 
 

Пожалуйста, обратите внимание, что вы также можете использовать значение по умолчанию next.js маршрутизатор :

 import { useRouter } from 'next/router'
function GoogleAuthCallback() {
  const [auth, setAuth] = useState()
   const router = useRouter()
   const location = router.pathname // or router.asPath
  ....
}