@xtreamsrl/react-routing

v0.1.1TypeScript

This package exposes hooks to facilitate navigation and routing.

0/weekUpdated 1 years agoUnpacked: 93.3 KB

Published by xtream

npm install @xtreamsrl/react-routing

Repository Homepage npm

@xtreamsrl/react-routing

This package exposes hooks to facilitate navigation and routing.

Installation

``shell npm install @xtreamsrl/react-routing`

`Usage`


In order to exploit alle these hooks it is required to import

BrowserRouter, Routes and Route straight from the react-router-dom

 library.
$3

In React router, URL parameters are placeholders declared in a Route, like in the example below (_:first_ and _:second_ specified in the

path

 field are placeholders).
Then it is possible to retrieve the route parameters in the

ParamsConsumer component using the useParams

 hook.

tsx
import {useParams} from "@xtreamsrl/react-routing";
import {BrowserRouter, Routes, Route} from "react-router-dom";
function ParamsConsumer() {
  const {first, second} = useParams<{first: string, second: string}>()
  return 
{first}, {second}

}
export function App() {
  return (
    
      
        home

}>
        }/>
      
    
  );
}


In the case of http://localhost:4200/a/b,

first would be equal to 'a' and second

 to 'b'.
$3

The hook simplifies retrieving and handling query parameters from URLs.

tsx
function QueryParamsConsumer() {
  const {first, second} = useQueryParams<{first: string, second: string}>()
  return {first}, {second}

}
export function App() {
  return (
    
      
        home

}>
        }/>
      
    
  );
}


In http://localhost:4200/queryParams?second=test2&first=test1 the QueryParamsConsumer extracts

first equal to 'test1' and second

 to 'test2'. 
$3

This hook facilitates navigation control. It returns four functions that can be used as needed:
-

goBack

goForward

goBackOf

: that allows to specify the number of pages to go back of
-

goForwardOf

: that allows to specify the number of pages to go forward of

tsx
  const navigation = useBrowserNavigation()

return <>``

Who we are

A proudly 🇮🇹 software development and data science startup.
We consider ourselves a family of talented and passionate people building their own products and powerful solutions for our clients. Get to know us more on xtreamers.io or follow us on LinkedIn.

Usage

In order to exploit alle these hooks it is required to import

and

straight from the

library.

$3

In React router, URL parameters are placeholders declared in a Route, like in the example below (_:first_ and _:second_ specified in the

field are placeholders).
Then it is possible to retrieve the route parameters in the

component using the

hook.

tsx
import {useParams} from "@xtreamsrl/react-routing";
import {BrowserRouter, Routes, Route} from "react-router-dom";

function ParamsConsumer() {
const {first, second} = useParams<{first: string, second: string}>()
return

{first}, {second}

}

export function App() {
return (

home