4.8.3. Admin Development Tips

In this chapter, you'll find some tips for your admin development.

Routing Functionalities#

To navigate or link to other pages, or perform other routing functionalities, use the react-router-dom package. It's installed in your project through the Medusa Admin.

For example:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@medusajs/admin-shared"2import { Container } from "@medusajs/ui"3import { Link } from "react-router-dom"4
5// The widget6const ProductWidget = () => {7  return (8    <Container>9      <Link to={"/orders"}>View Orders</Link>10    </Container>11  )12}13
14// The widget's configurations15export const config = defineWidgetConfig({16  zone: "product.details.before",17})18
19export default ProductWidget

This adds a widget in a product's details page with a link to the Orders page. The link's path must be without the /app prefix.

Learn more

Refer to react-router-dom’s documentation for other available components and hooks.

Was this chapter helpful?