TeamsMain.jsx file:
import React from "react";
import styles from './page.module.scss';
import Image, { StaticImageData } from "next/image";
import { useRouter } from "next/navigation";
import { teamList } from "@/app/assets/constants/data";
export interface Team {
image: StaticImageData;
name: string;
}
const TeamsMain = () => {
const router = useRouter();
const handleClick = (team: Team) => {
router.push(`/teams/${team.name}`);
}
return (
<div className={styles.teamMain__container}>
{teamList.map((team: Team) => (
<div
key={team.name}
className={styles.team__container}
onClick={() => handleClick(team)}
>
<Image src={team.image} alt={team.name}/>
<div className={styles.blue__overlay}>{team.name}</div>
<span>{team.name}</span>
</div>
))}
</div>
)
}
export default TeamsMain;
teamProfile page.tsx:
import React from "react";
import styles from './page.module.scss';
import Image, { StaticImageData } from "next/image";
import { teamList } from "../assets/constants/data";
import { Team } from '@/app/components/TeamsMain';
import { useRouter } from "next/router";
interface TeamProfileProps {
team: {
image: StaticImageData;
description: string;
}
}
const TeamProfilePage = () => {
const router = useRouter();
const { teamId } = router.query;
const selectedTeam = teamList.find((team: Team) => team.name === teamId);
return (
<div>
{selectedTeam ? (
<TeamProfile team={selectedTeam} />
) : (
<p>Team not found</p>
)}
</div>
);
};
const TeamProfile = ({ team }: TeamProfileProps) => {
return (
<div>
<Image src={team.image} alt="teamLogo" width={100} height={100} />
<p>{team.description}</p>
</div>
);
};
export default TeamProfilePage;
TeamId.tsx page:
import React from "react";
import TeamProfilePage from "../teamProfile/page";
const TeamIdPage = () => {
return <TeamProfilePage/>;
};
export default TeamIdPage;
When I try to click on an individual team from my array in the TeamsMain, it directs me to a 404 error page. The data is in another file and everything seems fine with code there.
Tried a bunch of methods, tried changing file structure as well to no avail.