react-hook-url

A simple, hook watching url for react.

Usage no npm install needed!

<script type="module">
  import reactHookUrl from 'https://cdn.skypack.dev/react-hook-url';
</script>

README

React Hook URL

A simple, hook watching url for react.

It uses hooks and URL api. I use TSDX for packaging.

Table of Contents

Install

yarn add react-hook-url

Get Started

Just use the hook in your component where you want.

import { history, useURL } from 'react-hook-url'

history

It's based on window.history

push

This method will redirect you to the new url.

inputs :

  • nextUrl: the url target
  • params: if you need it you can add object with params

exemple :

history.push('/login')}
history.push('/account', { user: 'joe' })}

goBack

history.goBack()

canGoBack

if(history.canGoBack()){
    history.goBack()
}

useURL

It's a hook for react component, watching path and params.

export const Account = () => {
  const { path ,params} = useURL();
  return(
    <div>
        <div>Path : {path}</div>
        <div>User : {params.user}</div>
    </div>
  )
}