useLocation

useLocation gives you a reactive object describing the URL the user is visiting
ts
const location = useLocation();
ts
const location = useLocation();

Usage

Getting a reactive object describing the current URL location

The useLocation hook gives you a reactive object describing the current URL location. It is a wrapper around the Location object from the browser. Since its a store, you can use it in any reactive context and you will subscribe to changes to that part of the URL.

tsx
import { useLocation } from "solid-start";
 
function Location() {
  const location = useLocation();
 
  console.log(location.pathname); // /users/123
  console.log(location.search); // ?sort=name
  console.log(location.hash); // #top
}
tsx
import { useLocation } from "solid-start";
 
function Location() {
  const location = useLocation();
 
  console.log(location.pathname); // /users/123
  console.log(location.search); // ?sort=name
  console.log(location.hash); // #top
}

If you want to use the search part, you should use the useSearchParams hook instead. It gives you much better control over the search string.

Reference

useLocation()

Call useLocation() inside a component to get the current URL (location).

tsx
import { useLocation } from "solid-start";
 
function Component() {
  const location = useLocation();
}
tsx
import { useLocation } from "solid-start";
 
function Component() {
  const location = useLocation();
}

Returns

A reactive object containing the attributes of the current location (URL):

  • pathname: string: the pathname part of the URL, without the query string,
  • search: string: the query string part of the URL
  • hash: string: the hash part of the URL, including the #