is medusa v2 admin ui path parameters working?

[Rohit-Bera]

Bug report

I have implemented admin ui routes to get custom development , in that i cannot access path parameters

Describe the bug

when we are passing the path parameters in browser URL , it is not printed in the page or in the console.

System information

Medusa version (including plugins): v2
Node.js version: v20.13.1
Database: postgresql
Browser (if relevant): chrome

Steps to reproduce the behavior

1. create page.tsx in the src/admin/routes/brand/[id]/page.tsx
2. paste this code

import { useParams } from "react-router-dom"
import { Container } from "@medusajs/ui"

const CustomPage = () => {
  const { id } = useParams()

console.log("id: ",id);

  return (
    <Container className="divide-y p-0">
      <div className="flex items-center justify-between px-6 py-4">
        <Heading level="h1">Passed ID: {id}</Heading>
      </div>
    </Container>
  )
}

export default CustomPage

3. run the app.

Expected behavior

• it should have print any params passed in the url
  http://localhost:9000/app/brand/123 => Passed ID: 123 or
• it should be seen in the console.

Screenshots

https://github.com/user-attachments/assets/6c43ce8b-6a42-476f-be87-675079645b20

Code snippets

src/admin/routes/brand/page.tsx

import { Table, Container, Heading, Alert } from "@medusajs/ui"
import { useEffect, useState } from "react"
import { defineRouteConfig } from "@medusajs/admin-sdk"
import { TagSolid } from "@medusajs/icons"
import { PromptDemo } from "../../../components/Prompt";

const BrandsPage = () => {
  const [brands, setBrands] = useState<
    Record<string, string>[]
  >([])
  
  useEffect(() => {
    fetch(`/admin/brand`, {
      credentials: "include",
    })
    .then((res) => res.json())
    .then(({ brands: brandsData }) => {
      setBrands(brandsData)
    })
  }, [])

  console.log("brands :",brands)


  return (
    <Container className="divide-y p-0">
      <div className="flex items-center justify-between px-6 py-4">
        <Heading level="h2">Brands</Heading>
      </div>
      <div className="flex h-full flex-col overflow-hidden !border-t-0">
        <Table>
          <Table.Header>
            // table code
            ))}
          </Table.Body>
        </Table>
      </div>
    </Container>
  )
}

export default BrandsPage

export const config = defineRouteConfig({
  label: "Brands",
  icon: TagSolid,
})

src/admin/brand/[id]/page.tsx

import {  Table , Container , Heading, Label } from "@medusajs/ui" 
import { useState ,useEffect } from "react"
import { defineRouteConfig, RouteConfig } from "@medusajs/admin-sdk"
import { TagSolid } from "@medusajs/icons";
import { useParams } from "react-router-dom";

const BrandsDetailPage = () => {

    const { id } = useParams();

    console.log("id :", id)

    return <Container className="divide-y p-0">
        <div className="flex items-center justify-between px-6 py-4">
            <Heading level="h2">Brands</Heading>
        </div>
        <div className="flex h-full flex-col overflow-hidden !border-t-0">
            <Label>Brand details</Label>
            <Label> Brand ID: {id}</Label>
        </div>
    </Container>
}

export const config: RouteConfig = {
    label: "BrandsDetailPage",
    icon: TagSolid,
}

export default BrandsDetailPage

[jgatto1]

Same issue here. I can't navigate to nested pages like src/admin/routes/demo/[id]/page.tsx, the page stays in /src/admin/routes/demo/page.tsx

[kasperkristensen]

Hey @Rohit-Bera and @jgatto1

useParams does work, but the issue is a bug in 2.0.0 that prevents nested pages as a whole from working. The issue has been resolved and will be part of 2.0.1, which will be released soon. In the meantime, you can get around the issue by adding this resolution in your package.json:

"resolutions": {
    "@medusajs/admin-bundler": "2.0.1-snapshot-20241023094231",
    "@medusajs/dashboard": "2.0.1-snapshot-20241023094231"
  },

if you are using npm then it should be an override instead