I am currently working on a project called Next 13 that involves using the app directory and MUI 5. The project's structure is organized as follows:
./src
./src/app
./src/app/dc
./src/app/dc/admin
./src/app/dc/admin/dc_types.jsx
However, when I try to navigate programmatically to the URL below, I keep encountering a 404 error:
http://localhost:3000/dc/admin/dc_types
The component responsible for the router.push() action looks like this:
"use client"
import { Box, Card, CardActionArea, CardContent, Typography } from "@mui/material"
import theme from "@/theme/theme"
import { usePathname, useRouter } from "next/navigation"
const ItemCard = (props) => {
const defaultTitle = "Card Title"
const defaultText = "Card Body"
const defualtURL = "#"
const { title, text, other } = props
const cardTitle = title !== undefined ? title : defaultTitle
const cardText = text !== undefined ? text : defaultText
const router = useRouter()
const pathname = usePathname()
const cardId = cardTitle.replace(/\s/g, "_").toLowerCase()
const handleClick = (e) => {
console.log(`${pathname}/${cardId}`)
router.push(`${pathname}/${cardId}`)
}
return (
<Box>
<Card elevation={2}>
<CardContent>
<CardActionArea onClick={handleClick}>
<Box sx={{
bgcolor: theme.palette.secondary.main,
color: theme.palette.common.white,
p: 1,
width: "100%",
"&:hover": {
bgcolor: theme.palette.primary.main,
},
}}>
<Typography
id={cardId}
component={"typography"}
variant="h6"
sx={{
color: theme.palette.common.white,
display: "flex",
justifyContent: "center",
textDecoration: "none",
}}
>
{cardTitle}
</Typography>
</Box>
</CardActionArea>
<Typography component={"div"} variant="body2" sx={{ pt: 1 }}>
{ cardText }
</Typography>
</CardContent>
</Card>
</Box>
)
}
export default ItemCardEven though the value of ${pathname}/${cardId} is correctly showing as /dc/admin/dc_types, I am still unable to manually input the URL.
It seems like there might be some misconfiguration or misunderstanding on my end of how the app router functions. As someone who is new to Next.js, I would greatly appreciate any assistance in solving this issue.
Thank you in advance for your help!