Hooks
Hooks
useBeforeURLChange
Fires before the route changes.
If result:
true
routing will occur normally
false
will prevent route from changing
import { useBeforeURLChange } from '@resourge/react-router'
useBeforeURLChange(() => {
return true; // or false
})
useBlocker
Fires before the route change, and serves to block or not the current route. Returns: isBlocking - true/false for if it is blocking next - Method that is going to call the original navigation
import { useBlocker } from '@resourge/react-router'
const [isBlocking, next] = useBlocker(() => {
return true; // or false
})
useLink
Hook that returns ‘href’ and onClick method to navigate to link Note: ‘to’ also gets normalize
import { useLink } from '@resourge/react-router'
const [href, onClick] = useLink({
to: '/product'
})
useMatchRoute
Hook to match path to current url
.
Returns null if it is a no match, otherwise returns match result.
import { useMatchRoute } from '@resourge/react-router'
const match = useMatchRoute({
path: '/product'
})
useNavigate
Returns a method for navigation to
.
Note: ‘to’ also gets normalize
import { useNavigate } from '@resourge/react-router'
const navigate = useNavigate()
useNormalizeUrl
Returns a method for normalize a url from to
.
Note: ‘to’ also gets normalize
import { useNormalizeUrl } from '@resourge/react-router'
const normalizeUrl = useNormalizeUrl()
...
const url = normalizeUrl('/product');
useParams
Returns the current route params
import { useParams } from '@resourge/react-router'
const params = useParams()
// or
const params = useParams((params) => {
return {
productId: Number(params.productId)
}
})
usePrompt
Fires before the route change and prompts the user Returns: isBlocking - true/false for if it is blocking next - Method that is going to call the original navigation
import { usePrompt } from '@resourge/react-router'
const [isBlocking, next] = usePrompt({
// When `true` it will prompt the user
// before navigating away from a screen.
// (accepts method that return's boolean).
when,
// When set, will prompt the user with native `confirm` and message.
// When `undefined` will wait `[1]` method to be called
message
})
useSearchParams
Returns the current search parameters and a method to change.
import { useSearchParams } from '@resourge/react-router'
const [searchParams, setParams] = useSearchParams({} /* default params */)
useSearchRoute
Hook to match search(s) to current url
.
Returns null if it is a no match, otherwise returns match result.
import { useSearchRoute } from '@resourge/react-router'
const match = useSearchRoute({
search: 'name'
})
useSwitch
Returns the first children component who props path
or search
matches the current location.
import { useSwitch } from '@resourge/react-router'
const matchComponent = useSwitch(children)
useRoute
Hook to access first parent ‘Route’.
import { useRoute } from '@resourge/react-router'
const route = useRoute()
useRouter
Hook to access to current URL.
import { useRouter } from '@resourge/react-router'
const { url, action } = useRouter()
useAction
Hook to access action that lead to the current URL
.
import { useAction } from '@resourge/react-router'
const action = useAction()
usePromptNext
To use inside Prompt components.
Contains the next
method to navigate after “Prompt” is finished.
import { usePromptNext } from '@resourge/react-router'
const next = usePromptNext()
Normalize
Examples:
baseUrl: /home/dashboard
to: "/home" // /home
to: "home" // /home/dashboard/home
to: "about" // /home/dashboard/about
to: "./about" // /home/dashboard/about
to: "/about" // /about
to: "../contact" // /home/contact
to: "../../products" // /products
to: "../../../products" // /products