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
})

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