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