Блог

Главная - Вопросы по программированию - Переход к динамически маршрутизируемой странице в следующем JS возвращает ошибку

Переход к динамически маршрутизируемой странице в следующем JS возвращает ошибку

#javascript #next.js

Вопрос:

При переходе по ссылке в том же веб-приложении на динамически маршрутизируемую страницу, нажав на ссылку, результат соответствует задуманному: я перехожу на страницу продукта (http://localhost/1 ).

Но когда я напрямую перемещаюсь, указывая номер продукта конкретно в строке поиска (переход к http://localhost/2 ), я получаю следующую ошибку:

 Server Error
TypeError: Cannot read property 'image' of undefined 

> | <Image src={"/../public/images/"   p.image}
                                        ^

До сих пор я пытался сопоставить типы и прочитать следующие документы JS по динамической маршрутизации.

Я удалил нулевой массив из фильтра, но по-прежнему не разрешил.

Возможно ли, что маршрутизация работает только при нажатии на ссылку в следующем JS? Есть ли какая-то недостающая настройка, которой я пренебрег?

страницы/[pid].js

 import { useRouter } from 'next/router'
import Image from 'next/image'

import data from '../products.json'

export default function Template() {
  const router = useRouter()
  const { pid } = router.query

  const p = data.filter(product => product._id == pid)[0]  // Choose one result

  return (
    <Image src={"/../public/images/"   p.image}
           height="500px"
           width="500px" />
  )
}

products.json

 [
  {
    "_id": 1,
    "name": "Toyota",
    "image": "toyota.png"
  },
  {
    "_id": 2,
    "name": "BMW",
    "image": "bmw.png"
  }
]

Обновление: я попытался жестко src закодировать атрибут в теге изображения, и в новой ошибке говорится, что проблема заключается в других ссылках. Поэтому я могу с уверенностью сказать, что проблема связана с отсутствием объекта, возвращаемого при вызове объекта данных.

Комментарии:

1. добавьте консоль. зарегистрируйте и распечатайте свою pid константу после ее получения router.query , это pid сработало после навигации? получает ли он обновления?

2. @novonimo При переходе по ссылке выводится идентификатор продукта. {pid: '2'} при использовании http://localhost/2 . При переходе прямо на страницу http://localhost/2 журналы консоли не создаются. Просто GET http://127.0.0.1:3000/1 500 (Internal Server Error) .

3. Под ним также есть ошибка, в которой говорится at Function.getInitialProps . Возможно, я неправильно извлекаю статические объекты в следующем JS.

Ответ №1:

Я решил проблему!

Недостаточно было использовать динамические маршруты с помощью функции ‘useRouter ()’. Мне также пришлось определить эти две функции:

 export async function getStaticProps(context) {
  // No-op since getStaticPaths needs getStaticProps to be called.
  return { props: {} }
}

export async function getStaticPaths() {
  const dynamicFiles = products.map(product => (
    {
      params: { pid: String(product._id) },  // Product IDs are ints in JSON file
    }
  ))

  return {
    paths: dynamicFiles,
    fallback: false
  }
}

Это имеет смысл, поскольку вы не хотите, чтобы случайные пути использовались в качестве переменной. Например, тогда пользователь сможет указать http://localhost/1234 , когда 1234 недопустимый параметр.

https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops

Метки: