Next.js Динамическая маршрутизация

Question

Я создаю LMS, используя Next.js. Пока моя структура проекта - localhost / course / 1. Каждый курс будет состоять из 7 страниц. Панель управления, Задания, TestAndQuizzes, Журнал успеваемости, Ресурсы, Объявления и Список. У меня готовы все компоненты и страницы. Поэтому, если я вручную перейду на localhost / course / 1 / assignments или localhost / course / 1323 / roster и т. Д., Все будет нормально. Я хочу сделать следующее: когда я нажимаю на ссылку задания, мне нужно перейти на страницу задания этого конкретного курса - что-то вроде localhost / course / 1 / assignments. В настоящее время я жестко запрограммировал URL-адрес на / курсы / 1 / [страница], поэтому, если я нажму на назначения, он перейдет на localhost / курсы / 1 / назначение, или если я нажму на список, он перейдет налокальный / курсы / 1 / ростер . Как сделать этот маршрут динамическим, чтобы, когда пользователи нажимают на одну из вкладок внутри курса, они переходили на эту страницу этого конкретного курса? Я просмотрел следующий / ссылка и следующий / маршрутизатор, но я все еще не могу это сделать. Любая помощь?

Answer 1

В данных JSON замените жестко запрограммированные идентификаторы курса в url поля с, например /courses/[courseId] или /courses/[courseId]/assignments.

Затем вы можете использовать формат объекта URL в Linkс href интерполировать [courseId] в URL-адресах с идентификатором текущего курса, полученным из router.query.

      import Link from 'next/link';
import { useRouter } from 'next/router';

function SidebarItem({ title, Icon, url }) {
    const router = useRouter();

    return (
        <div>
            <li className="flex mb-8 group">
                <div className="shadow-sm p-2 mr-3 rounded-lg"><Icon className="h-8 w-9 hover:animate-bounce" /></div>
                <Link href={{
                    pathname: url,
                    query: { courseId: router.query.courseId }
                }}>
                    <a className="self-center cursor-pointer transition duration-100 transform hover:scale-125">{title}</a>
                </Link>
            </li>
        </div>
    );
}

Это должно сделать все ссылки на боковой панели динамическими в зависимости от текущей страницы курса, на которой находится пользователь.

Answer 2

Я бы порекомендовал вам взглянуть на встроенную динамическую маршрутизацию https://nextjs.org/docs/routing/dynamic-routes

В своей файловой структуре вы можете указать динамическую маршрутизацию с такими папками, как pages/courses/[id]/assignments.jsx убедитесь, что имя папки точно такое же, как [id] так что это динамично