Views

Views are React components that represent the pages of your application. Views are returned from controller actions or route handlers and accept data as props.

Usage

Views are just React components, being rendered by a controller action or route handler. Create your views somewhere in the resources directory, preferably in resources/views.

Rendering from controller actions

// app/Controllers/Http/UsersController.ts
import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
import { Index, Show } from '../../../resources/views/Users.tsx'


export default class UsersController {
  public index({ radonis }: HttpContextContract) {
    return radonis.render(Index, { myProp: 'Hello world' })
  }
  public show({ radonis }: HttpContextContract) {
    return radonis.render(Show, { myProp: 'Hello world' })
  }
}

Rendering from route handlers

// start/routes.ts
import Route from '@ioc:Adonis/Core/Route'
import { SignUp } from '../resources/views/Auth.tsx'


Route.get('/signUp', async ({ radonis }) => {
  return radonis.render(SignUp, { myProp: 'Hello world' })
})

Getting props from a view as JSON

When a HTTP request is sent to a route that renders a view, the props are returned as JSON if the request's accept header is set to application/json.