---
title: Page
---

# Page

A page in Ray is also a React component.

```jsx | sandbox previewTitle="Basic Page Example"
// src/pages/index.js
import { View } from '@ray-js/ray';

const IndexPage = () => {
  return <View>Hello world!</View>;
};

export default IndexPage;
```

## Page configuration

Suppose that the page file is `src/pages/index.js`. The configuration file of this page is `src/pages/index.config.js`.

It works the same way as `global.config.js`. You can export a single configuration by default or platform-specific configuration.

```js
export const web = {
  navigationBarTitleText: 'Account Center',
  backgroundColor: '#f2f4f6',
};

export const tuya = {
  navigationBarTitleText: 'Account Center',
  backgroundColor: '#f2f4f6',
};

export const wechat = {
  navigationBarTitleText: 'Account Center',
  backgroundColor: '#f2f4f6',
};
```

## Lifecycle

For class components, you can listen for the page lifecycle directly on the class.

```jsx | sandbox previewTitle="Class Page Lifecycle"
import React from 'react';
import { View } from '@ray-js/ray';

export default class IndexPage extends React.Component {
  // didMount is triggered on `onLoad`
  componentDidMount() {
    console.log('IndexPage load');
  }
  onShow() {
    console.log('IndexPage show');
  }
  render() {
    return <View>Hello world!</View>;
  }
}
```

For functional components, you can use hooks to listen for the page lifecycle.

```jsx | sandbox previewTitle="Hooks Page Lifecycle"
import { View, usePageEvent } from '@ray-js/ray';

export default () => {
  // onShow lifecycle
  usePageEvent('onShow', () => {
    console.log('onShow');
  });
  // onBack callback
  usePageEvent('onBack', () => {
    console.log('onBack');
  });

  return <View>Hello world!</View>;
};
```

> Note
> The lifecycle callback of the class component can only be used on the page component. Hooks can be used on any functional components.

## Page parameters

Ray passes page parameters to the page component through `props`. Example:

```jsx | pure
import { View } from '@ray-js/ray';

export default (props) => {
  // Page parameters
  console.log(props.location.query);
  return <View>view</View>;
};
```

Alternatively, you get the parameters through the miniapp's native method, generally in `onLoad` event. The same applies to scene values.

## Get page instances

Get page instances through `getCurrentPages`.

```jsx | sandbox
import { View, getCurrentPages } from '@ray-js/ray';

export default () => {
  const pages = getCurrentPages();
  return <View>pages: {pages.length}</View>;
};
```

> Note
> Ray sets internal logic-related properties (including `data` values) on page instances, so do not modify the properties on the instances.