Navigation & Routes

Introduction

One of the highlights of a good admin application is to ensure that it is well-positioned and that navigation is simple. To control navigation in the VTEX admin side menu there are two files that will be useful: navigation.json androutes.json.

navigation.json

Navigation is the file that defines the navigation rules in the VTEX admin sidebar. With it, you can build from a simpler link, in which a click takes you to your app, how to build more complex menus with associated submenus.

routes.json

The routes define the routes and associated react components, from your application, any component that is mapped to a route must be declared in the routes, even if it is not directly associated with a navigation item in navigation.json.

Atividade

1. Within the /admin/folder created in the previous step, create two more files,navigation.json and routes.json:

|_ admin/
+ |_ navigation.json
+ |_ routes.json

2. In navigation.json create a JSON object with the properties section, titleId and path:

{
  "section": "orders",
  "titleId": "admin-example.navigation.label",
  "path": "/admin/iotraining"
}

3. In routes.json assign a component and path to the created navigation:

{
  "admin.app.example": {
    "component": "adminExample",
    "path": "/admin/app/iotraining"
  }
}

NOTE: The mapping from a navigation to a route is done through the path. The path must diverge only by a /app/ in routes.json

//navigation.json

/admin/{{yourpath}}

//routes.json

/admin/app/{{yourpath}}

4. Finally, create a simple hello world component with the same name that you gave to component in routes.json:

//react/adminExample.tsx
import React, { FC } from 'react'

const AdminExample: FC = () => {
  return <h1>Hello, World!</h1>
}

export default AdminExample

Link the application (vtex link). The result should be as follows:

Notice that the created menu has no message yet, we will evolve it later, click on the blank space shown above to see the message of Hello, World!.

Any questions?

See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)