Response Objects

Response objects are created by the router to descibe the route that matches a location. Some of these properties are set automatically, while others can be modified using the object returned a route's response() function.

Note: You can review the response properties that can be modified in the routes guide.

The Properties of a Response Object#

  // The location key
  key: '1.0',

  // The location object used to generate the response.
  location: { pathname: '/photos/6789/12345', ... },

  // The name of the best matching route
  name: 'Photo',

  // The name of ancestor routes that matched
  // part of the location's pathname
  partials: ['Album'],

  // An object containing the values parsed
  // from the pathname by path-to-regexp.
  // This includes params from ancestor routes.
  params: { photoID: 12345, albumID: 6789 },

  // The status code for the response.
  // This defaults to 200.
  // It can also be set with a route's response() return object
  status: 200,

  // This can be anything you want. It is set using
  // a route's response() return object.
  // The default value is undefined.
  data: {...},

  // The title string is set using a route's response() return object
  // The default value is an empty string.
  title: 'Photo 12345',

  // The body value is set using a route's response() return object.
  // This is where you can attach component(s) to a route. The structure here
  // is up to you, but each of your routes should have the same structure.
  body: Photo,
  // or maybe
  body: {
    menu: PhotoMenu,
    main: Photo
  // Please see below for more information about this property

  // A value set by the route's response() return object.
  // defaults to undefined
  error: undefined

Redirect Response#

When route.response() returns an object with a redirectTo property the response's redirectTo will be a location object. Curi will automatically redirect the location when it sees this.

  // The redirectTo property provides information on
  // where you should redirect to
  redirectTo: { pathname: '/login' }

You can choose whether or not you want redirect responses emitted to response handlers. The default behavior is that they are, but this also means that you have to render using the redirect response. You can pass the { emitRedirects: false } option when you create your router to prevent this.

const router = curi(history, routes, {
  emitRedirects: false

The Body Property#

The body property of a response is likely the most important property of a response because it is what you will actually render. It is set using the object returned from the matched route'sresponse() function. This value can be anything you want it to be, but it should usually be a function/component or an object containing functions/components.

  name: "Home",
  path: "",
  response: () => {
    // a function/component
    return {
      body: Home
    // an object containing
    // functions/componnets
    return {
      body: {
        menu: HomeMenu,
        main: Home
Note: It is important that each route uses the same structure for setting the body. Mixing structures will make renderin more difficult to reason about.


Next, we'll take a look at another object passed to response handlers: navigation objects .