@xtreamsrl/react-routing v0.1.1

@xtreamsrl/react-routing

This package exposes hooks to facilitate navigation and routing.

Installation

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.

useParams

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.

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 <div>{first}, {second}</div>
}

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<div>home</div>}></Route>
        <Route path="/:first/:second" element={<ParamsConsumer/>}/>
      </Routes>
    </BrowserRouter>
  );
}

In the case of http://localhost:4200/a/b, first would be equal to 'a' and second to 'b'.

useQueryParams

The hook simplifies retrieving and handling query parameters from URLs.

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

export function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<div>home</div>}></Route>
        <Route path="/queryParams" element={<QueryParamsConsumer/>}/>
      </Routes>
    </BrowserRouter>
  );
}

In http://localhost:4200/queryParams?second=test2&first=test1 the QueryParamsConsumer extracts first equal to 'test1' and second to 'test2'.

useBrowserNavigation

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

  const navigation = useBrowserNavigation()

return <>
  <button onClick={() => navigation.goBack()}>Go back</button>
  <button onClick={() => navigation.goForward()}>Go forth</button>
  <button onClick={() => navigation.goBackOf(2)}>Go back of 2</button>
  <button onClick={() => navigation.goForwardOf(2)}>Go forth of 2</button>
</>

Who we are