---
title: location - Page route information, get current page URL parameters and route matching parameters
---

## location

> @ray-js/ray `>=0.6.23` 。

### Import

```js
import { location } from '@ray-js/ray';
```

### Properties

| Property | Type | Description |
| --- | --- | --- |
| pathname | string | URL path |
| search | string | URL query string |
| href | string | Full page path |
| query | Record\<string, string\> | URL query parameters (parameters after `?`) |
| params | Record\<string, string\> | Route expression matched parameters (e.g., `uid` in `/detail/:uid`) |
| hash | string | hash (web only) |
| host | string | URL host with port (web only) |
| hostname | string | URL hostname (web only) |
| port | string | URL port (web only) |
| protocol | string | URL protocol (web only) |

### Difference between params and query

- **params**: Parameters matched from the route expression. For example, if the route is configured as `/detail/:uid` and navigates to `/detail/1234`, then `location.params.uid` is `'1234'`.
- **query**: Parameters parsed from the URL query string after `?`. For example, navigating to `/detail/1234?name=tuya`, then `location.query.name` is `'tuya'`.

### Example

```tsx
import { View } from '@ray-js/ray';
import { location } from '@ray-js/ray';

// Route configured in routers.config.ts:
// { route: '/detail/:uid', path: '/pages/detail/index' }

// Assuming navigation: router.push('/detail/1234?name=tuya')

function DetailPage() {
  // Get route expression parameters via params
  const uid = location.params.uid; // '1234'

  // Get URL query parameters via query
  const name = location.query.name; // 'tuya'

  return (
    <View>
      <View>uid: {uid}</View>
      <View>name: {name}</View>
    </View>
  );
}

export default DetailPage;
```