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

Question

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

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

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

我查阅了 next/link 和 next/router，但我仍然做不到。有帮助吗？

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

就像我上面说的，现在我已经使用 links 将某人发送到 /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 格式，用从 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>
    );
}

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

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

How to make Next.js links dynamic based on current dynamic page?

reactjs

next.js

next-router

dynamic-routing