如何根据当前动态页面使 Next.js 链接动态化？

Question

我正在使用 Next.js 构建 LMS。到目前为止，我的项目结构是localhost/courses/1。每门课程将有 7 页。仪表板、作业、TestAndQuizzes、成绩簿、资源、公告和名册。我已经准备好所有组件和页面。因此，如果我手动转到localhost/courses/1/assignments 或localhost/courses/1323/roster 等，则可以正常工作。

我想要做的是：当我点击作业链接时，我需要转到该特定课程的作业页面 - 例如localhost/courses/1/assignments。目前，我已将 URL 硬编码为 /courses/1/[page]，因此如果我点击 assignments，它将转到 localhost/courses/1/assignment，或者如果我点击 roster，它将转到 localhost/courses/1/roster。

如何使该路线动态化，以便当用户单击课程中的一个选项卡时，它会将他们带到该特定课程的页面？

我查找了next/link 和next/router，但我仍然无法做到这一点。 有什么帮助吗？

编辑：这是我的文件夹结构：

就像我上面说的，现在我已经使用链接将某人发送到/courses/1/assignment。

如果您想查看托管在My app 的网站。

import Image from 'next/image';
import tools from "./sidebarData";
import SideBarItem from "./SidebarItem";

function Sidebar() {
    return (
        <div className="flex mt-8 ml-20">
            <div className="">
                <ul>
                    {Object.entries(tools).map(([key, {title, url, icon}]) => (
                        <SideBarItem key={key} title={title} Icon={icon} url={url}/>
                    ))}
                </ul>

            </div>
        </div>
    )
}

export default Sidebar;

import Link from 'next/link';
import {useState, useEffect} from 'react';

function SidebarItem({title, Icon, url}) {

    const [currentUrl, setCurrentUrl] = useState('');
    
    useEffect(() => {
        setCurrentUrl(window.location.href);
    }), [];

    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={`${url}`} ><a className="self-center cursor-pointer transition duration-100 transform hover:scale-125">{title}</a></Link>
            </li>
        </div>
    )
}

export default SidebarItem;

// export tool names and URLs
import {
    AcademicCapIcon,
    HomeIcon,
    BookOpenIcon,
    UserGroupIcon,
    SpeakerphoneIcon,
    FolderOpenIcon,
    QuestionMarkCircleIcon

} from "@heroicons/react/outline";

export default{
    goToHome:{
        title: 'Home',
        url: '/courses/1/',
        icon: HomeIcon,
        component : "dashboard"
    },
    goToAsignments:{
        title: 'Assignments',
        url: '/courses/1/assignments',
        icon: AcademicCapIcon,
        component : "assignment"
    },
    goToTestQuizzes:{
        title: 'Test and Quizzes',
        url: '/courses/1/testAndQuizzes',
        icon:QuestionMarkCircleIcon,
        component : "testAndQuizzes"
    },
    goToGradeBook:{
        title: 'Gradebook',
        url: '/courses/1/gradebook',
        icon:BookOpenIcon,
        component : "gradebook"
    },
    goToResources:{
        title: 'Resources',
        url: '/courses/1/resources',
        icon: FolderOpenIcon,
        component : "resources"
    },
    goToAnnouncements:{
        title: 'Announcements',
        url: '/courses/1/announcements',
        icon:SpeakerphoneIcon,
        component : "announcements"
    },
    goToRoster:{
        title: 'Roster',
        url: '/courses/1/roster',
        icon:UserGroupIcon,
        component : "roster"
    },
}

Answer 1

我建议您查看内置的动态路由 https://nextjs.org/docs/routing/dynamic-routes

在您的文件结构中，您可以使用 pages/courses/[id]/assignments.jsx 等文件夹指定动态路由 确保您的文件夹名称与[id] 完全相同，因此它是动态的

Answer 2

在您的 JSON 数据中，将 url 字段中的硬编码课程 ID 替换为 [courseId]，例如/courses/[courseId] 或 /courses/[courseId]/assignments。

然后，您可以在Link 的href 中使用URL object 格式，将URL 中的[courseId] 插入到从router.query 检索到的当前课程ID。

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>
    );
}

这应该使侧边栏中的所有链接都是动态的，基于用户当前所在的课程页面。