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

Question

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

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

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

我抬起头next/link，next/router但我仍然做不到。有什么帮助吗？

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

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

如果您想查看该网站，它托管在我的应用程序中。

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

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

然后，您可以使用中的URL 对象Link格式将URL中的 与从 中检索到的当前课程 IDhref进行插值。[courseId]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>
    );
}

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