964927b597
* docs improvements and changes * updated module definition * modules + dml changes * fix build * fix vale error * fix lint errors * fixes to stripe docs * fix condition * fix condition * fix module defintion * fix checkout * disable UI action * change oas preview action * flatten provider module options * fix lint errors * add module link docs * pr comments fixes * fix vale error * change node engine version * links -> linkable * add note about database name * small fixes * link fixes * fix response code in api reference * added migrations step
137 lines
4.0 KiB
Plaintext
137 lines
4.0 KiB
Plaintext
export const metadata = {
|
||
title: `${pageNumber} Admin UI Routes`,
|
||
}
|
||
|
||
# {metadata.title}
|
||
|
||
In this chapter, you’ll learn how to create a UI route in the admin dashboard.
|
||
|
||
## What is a UI Route?
|
||
|
||
A UI route is a React Component that adds a new page to your admin dashboard. The UI Route can be shown in the sidebar or added as a nested page.
|
||
|
||
For example, you may add a new page to manage product reviews.
|
||
|
||
---
|
||
|
||
## How to Create a UI Route?
|
||
|
||
A UI route is created in a file named `page.tsx` under the `src/admin/routes` directory. The file’s default export must be the UI route’s React component.
|
||
|
||
For example, create the file `src/admin/routes/custom/page.tsx` with the following content:
|
||
|
||
```tsx title="src/admin/routes/custom/page.tsx"
|
||
import { Container } from "@medusajs/ui"
|
||
|
||
const CustomPage = () => {
|
||
return <Container>This is my custom route</Container>
|
||
}
|
||
|
||
export default CustomPage
|
||
```
|
||
|
||
The new page’s path is the file’s path relative to `src/admin/routes`. So, the above UI route is a new page added at the path `localhost:9000/app/custom`.
|
||
|
||
---
|
||
|
||
## Test the UI Route
|
||
|
||
To test the UI route, start the Medusa application:
|
||
|
||
```bash npm2yarn
|
||
npm run dev
|
||
```
|
||
|
||
Then, after logging into the admin dashboard, open the page `localhost:9000/app/custom` to see your custom page.
|
||
|
||
---
|
||
|
||
## Show UI Route in the Sidebar
|
||
|
||
A UI route file can export a configuration object that indicates a new item must be added in the sidebar linking to the new UI route.
|
||
|
||
For example:
|
||
|
||
export const highlights = [
|
||
["14", "label", "The label of the UI route's sidebar item."],
|
||
["15", "icon", "The icon of the UI route's sidebar item."]
|
||
]
|
||
|
||
```tsx title="src/admin/routes/custom/page.tsx" highlights={[["21"], ["22"], ["23"], ["24"], ["25"], ["26"]]}
|
||
import { defineRouteConfig } from "@medusajs/admin-shared"
|
||
import { ChatBubbleLeftRight } from "@medusajs/icons"
|
||
import { Container } from "@medusajs/ui"
|
||
|
||
const CustomPage = () => {
|
||
return <Container>This is my custom route</Container>
|
||
}
|
||
|
||
export const config = defineRouteConfig({
|
||
label: "Custom Route",
|
||
icon: ChatBubbleLeftRight,
|
||
})
|
||
|
||
export default CustomPage
|
||
```
|
||
|
||
The configuration object is created using the `defineRouteConfig` function imported from `@medusajs/admin-shared`. It accepts the following properties:
|
||
|
||
- `label`: the sidebar item’s label.
|
||
- `icon`: an optional React component used as an icon in the sidebar.
|
||
|
||
The above example adds a new sidebar item with the label `Custom Route` and an icon from the [Medusa UI Icons package](!ui!/icons/overview).
|
||
|
||
---
|
||
|
||
## Create Settings Page
|
||
|
||
To create a page under the settings section of the admin dashboard, create the UI route file under the path `src/admin/routes/settings`.
|
||
|
||
For example:
|
||
|
||
```tsx title="src/admin/routes/settings/custom/page.tsx"
|
||
import { defineRouteConfig } from "@medusajs/admin-shared"
|
||
import { Container, Heading } from "@medusajs/ui"
|
||
|
||
const CustomSettingPage = () => {
|
||
return (
|
||
<Container>
|
||
<Heading level="h1">Custom Setting Page</Heading>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export const config = defineRouteConfig({
|
||
label: "Custom",
|
||
})
|
||
|
||
export default CustomSettingPage
|
||
```
|
||
|
||
This adds a page under the path `/app/settings/custom`. An item is also added to the settings sidebar with the label `Custom`.
|
||
|
||
---
|
||
|
||
## Path Parameters
|
||
|
||
A UI route can accept path parameters if the name of any of the directories in its path is of the format `[param]`.
|
||
|
||
For example, create the file `src/admin/routes/custom/[id]/page.tsx` with the following content:
|
||
|
||
```tsx title="src/admin/routes/custom/[id]/page.tsx" highlights={[["5", "", "Retrieve the path parameter."], ["7", "{id}", "Show the path parameter."]]}
|
||
import { useParams } from "react-router-dom"
|
||
import { Container } from "@medusajs/ui"
|
||
|
||
const CustomPage = () => {
|
||
const { id } = useParams()
|
||
|
||
return <Container>Passed ID: {id}</Container>
|
||
}
|
||
|
||
export default CustomPage
|
||
```
|
||
|
||
You access the passed parameter using `react-router-dom`'s [useParams hook](https://reactrouter.com/en/main/hooks/use-params).
|
||
|
||
If you run the Medusa application and go to `localhost:9000/app/custom/123`, you'll see `123` printed in the page.
|