logo@krutoo/utils

useRouteParams

React hook to exec pathname pattern and read params from current location.

Usage

import { useRouteParams } from '@krutoo/utils/react';

function App() {
  const { userId } = useRouteParams('/users/:userId');

  return <>{/* ... */}</>;
}

Requirements

You need to wrap your root component to special RouterContext to make router specific hooks working:

import { createRoot } from 'react-dom';
import { RouterContext } from '@krutoo/utils/react';
import { BrowserRouter } from '@krutoo/utils/router';
import { App } from '#components/app';

const router = new BrowserRouter();

router.connect();

createRoot(document.querySelector('#root')).render(
  <RouterContext value={router}>
    <App />
  </RouterContext>,
);