Next.js динамическая маршрутизация добавляет к существующему пути

#reactjs #next.js #strapi

Вопрос:

В моем Next.js блог с помощью Strapi CMS, я пытаюсь сортировать сообщения на основе их категории. Я создал динамический маршрут для categories [id].js. Он использует getStaticPaths следующим образом:

 export async function getStaticPaths() {
const categories = await getCategories()
return {
    paths: categories.map((category) => `/categories/${category.id}`) || [],
    fallback: false,
}

Я использую выпадающий список для фильтрации категорий.
Например, если я выберу категорию 1, путь будет выглядеть следующим образом http://localhost:3000/categories/1 .
Пока все в порядке.

Но выпадающий список по-прежнему отображается на странице, и когда я выбираю категорию 2. Теперь путь http://localhost:3000/categories/categories/2 что, конечно же, приводит к ошибке 404.

ожидаемый результат http://localhost:3000/categories/2

Компонент next / link, который я использую для выпадающих элементов, выглядит следующим образом:

 <Link href="/categories/[id]" as={`/categories/${category.id}`}>
      <a>{category.name}</a>
</Link>

Я знаю, что допустил какую-то ошибку, но не могу понять, что это такое.

Однако у меня есть [slug].js для сообщений, который также отображает больше сообщений. Это перенаправляет на соответствующие сообщения без добавления дополнительных /сообщений для пути. Но это не работает аналогичным образом для категорий. Пожалуйста, помогите.

Ответ №1:

Он должен возвращать id только.

 export async function getStaticPaths() {
  const categories = await getCategories()
  const paths = categories.map((category) => ({
    params: { id: category.id.toString() },
  }))
  return {
      paths,
      fallback: false,
  }
}

1. Спасибо за ответ. Пробовал это, не сработало.

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

3. идентификатор должен быть string => params: { id: category.id.toString() }

4. Я не думаю, что это проблема. Если я введу правильный адрес вручную, отобразится требуемая страница. Просто добавляется дополнительный ` / categories` . кстати, попытался преобразовать его в строку. не сработало

Ответ №2:

Почему вы не используете parmas свойство, как в этом примере? https://nextjs.org/docs/basic-features/data-fetching#getstaticpaths-static-generation

1. Спасибо за ответ. Вы имеете в виду, как упоминал @Nilesh Patel? Это не сработало

2. export async function getStaticProps({ params }) { const categories = await getCategories() const posts = await getPostByCategory(params.id) const category = posts[0]?.category.name.toString() || '' return { props: { posts, categories, category }, revalidate: 1, }; }

Ответ №3:

Я не уверен, что это правильный способ решить эту проблему, я просто добавил условие, чтобы проверить, есть ли уже /categories в имени пути. Если это так, я не добавляю /categories в ссылку href следующим образом:

     <Link as={this.props.router.pathname.includes("categories") ? `${category.id}` : `categories/${category.id}`}
          href={this.props.router.pathname.includes("categories") ? "[id]" : "categories/[id]"}>
      <a>{category.name}</a>
   </Link>

Пожалуйста, дайте мне знать, если есть какое-либо лучшее решение