solidjs.com

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 it's a store, you can use it in any reactive context, and you will be subscribed 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 #.