Next 13 app directory routing and programmatic navigation?

I have a Next 13 project using the app directory and MUI 5. The structure of the project is as follows:

./src
./src/app
./src/app/dc
./src/app/dc/admin
./src/app/dc/admin/dc_types.jsx

Given the structure above, when I attempt to programmatically navigate to the following url, I am getting a 404 error:

http://localhost:3000/dc/admin/dc_types

The component that is performing the router.push() is as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

"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 ItemCard

<!-- end snippet -->

When I look at the value of the value for ${pathname}/${cardId} it is /dc/admin/dc_types.

I am unable to type the url in manually either.

I am not sure what I am missing? I obviously have something misconfigured? Or more likely a misunderstanding of how the app router works? I'm relatively new to Next.js.

I appreciate the help in advance.

When working in the app directory, your paths are defined by folders. If you want a route to return a component, that file must be named page.tsx (or .jsx).

You need to change your route:

./src/app/dc/admin/dc_types.jsx

to

./src/app/dc/admin/dc_types/page.jsx

That will route to localhost:3000/dc/admin/dc_types/

I would recommend reading through the routing section on the official Next.JS docs for how to use the app directory.