On this page
locationImportPropertiesDifference between params and queryExample

location

@ray-js/ray >=0.6.23 。

Import

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

Properties

PropertyTypeDescription
pathnamestringURL path
searchstringURL query string
hrefstringFull page path
queryRecord<string, string>URL query parameters (parameters after ?)
paramsRecord<string, string>Route expression matched parameters (e.g., uid in /detail/:uid)
hashstringhash (web only)
hoststringURL host with port (web only)
hostnamestringURL hostname (web only)
portstringURL port (web only)
protocolstringURL 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

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;