Next.js 13 параметров маршрутизации

Question

Привет, ребята, во-первых, я новичок в реакции и nextjs. Так что извините, если мой вопрос глупый.

В настоящее время я создаю навигацию с помощью nextjs 13 в новой папке приложения. Вот мой компонент навигации, в котором я создаю ссылки на категории с компонентом:

      import React from 'react'
import fetchMainNavigation from '../lib/fetchMainNavigation'
import Link from 'next/link'

const DesktopNavigation = async () => {
  const categories = await fetchMainNavigation

  return (
    <nav className={'hidden md:flex'}>
      <ul className={'flex flex-row gap-4'}>
        {categories.map((category) => (
          <li key={category.id}>
            <Link
              href={`${category.id}`}
              className={
                'hover:underline hover:text-gold hover:scale-110 transition-transform duration-200'
              }
            >
              {category.name}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}

export default DesktopNavigation

export async function generateStaticParams() {
  const categories = await fetchMainNavigation

  return categories.map((category) => ({
    categoryId: category.id.toString(),
  }))
}

Я также создал динамический маршрут "/app/[categoryId]/page.jsx". Маршрутизация работает нормально, но теперь у меня нечитаемый URL-адрес, например «www.mypage.com/46asdfg56as8g», но я хочу что-то вроде «www.mypage.com/food». Я знаю, что могу использовать имя категории для маршрутизации, но мне нужен идентификатор категории в качестве параметра в "/app/[categoryId]/page.jsx" для получения информации о текущей активной категории. Есть ли способ добиться этого?

Я уже просмотрел документацию Next.js 13, а также просмотрел stackoverflow и другие источники, но пока ничего не нашел об этой проблеме.

Answer 1

js 13.4.4 они называют это «Динамическими маршрутами», если вам нужен этот маршрут в браузере «www.mypage.com/food», а затем вам нужны некоторые подробности, например «www.mypage.com/food/1».

Вам необходимо создать эту структуру папок в вашем проекте.

/src/app/food/page.tsx — список еды /src/app/food/[id]/page.tsx — подробная информация о еде

Вы можете прочитать параметр id, передав реквизиты компоненту

      export default function Page({ params }: { params: { id: string } }) {
   const { id } = params;

   return <p>{id}</p>

}

Это ссылка на документацию

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes

Answer 2

Вот обновленный документ

      'use client';
 
import { useParams } from 'next/navigation';
 
export default function ExampleClientComponent() {
  const params = useParams();
 
  // Route -> /shop/[tag]/[item]
  // URL -> /shop/shoes/nike-air-max-97
  // `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
  console.log(params);
 
  return <></>;
}

Answer 3

Он находится в бета-документации здесь . Кроме того, в самой первой категории документов здесь

Чтобы использовать следующие 13 бета-слагов, просто передайте их в качестве свойства params, как указано в официальной документации.

      const DesktopNavigation = async ({ params }) => {
  const category = params['category'];
  ...
}