1

我正在使用 Next.js 构建 LMS。到目前为止，我的项目结构是localhost/courses/1. 每门课程将有 7 页。仪表板、作业、TestAndQuizzes、成绩簿、资源、公告和名册。我已经准备好所有组件和页面。因此，如果我手动转到localhost/courses/1/assignmentsorlocalhost/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"
    },
}

4

2 回答 2

1

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

然后，您可以在's中使用URL 对象格式，在URL中插入从中检索到的当前课程 ID 。Linkhref[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>
    );
}

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

于 2021-10-23T22:53:06.397 回答
0

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

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

于 2021-10-21T02:17:20.343 回答