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

Question

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

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

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

我查看了 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

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

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

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

这应该使边栏中的所有链接都是动态的，基于用户当前所在的类(class)页面。