`useNavigate`

React hook for navigate between routes of application.

Usage

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

function App() {
  const navigate = useNavigate();

  const goToProfile = () => {
    // navigating to specific route
    navigate('/profile');
  };

  const goBack = () => {
    // navigating over history
    navigate.go(-1);
  };

  return (
    <main>
      <button onClick={goBack}>Back</button>
      <img onClick={goToProfile} src='/me/avatar.png' />
      {/* ... */}
    </main>
  );
}

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>,
);