Skip to main content
Hana’s router is built on top of react router, so uses similar methods for navigating your pages:
  • <Link>
  • useNavigate
<Link> is a built-in component that renders an HTML <a> tag. It allows users navigate to another page by clicking or tapping on it. It is the primary way to navigate between routes in Hana. 
import { Link } from '@hanabira/router';

export default function Home() {
  return (
    <div>
      <Link to="/about">About</Link>
    </div>
  );
}
  • to - The path to navigate to. This can be a string or an object.
  • replace - If true, clicking the link will replace the current entry in the history stack instead of adding a new one.
  • state - The state property can be used to set a stateful value for the new location which is stored inside history state. This value can subsequently be accessed via useLocation()
<Link to="/next-path" state={{ something: "value" }}>
  ...
On the /next-path page, you can access the state value like this: 
import { useLocation } from '@hanabira/router';

export default function NextPath() {
  const { state } = useLocation();

  return <div>{state.something}</div>;
}
For more information on the <Link> component, check out the base React Router documentation.

​
Using navigation hooks

The useNavigate hook is used to navigate to a new location. It is the programmatic way to navigate between routes. 
import { useNavigate } from '@hanabira/router';

export default function Home() {
  const navigate = useNavigate();

  return (
    <div>
      <button onClick={() => navigate('/about')}>About</button>
    </div>
  );
}

​
Hook options

The navigate function accepts a route string as its first argument and an options object as its second argument. 
const navigate = useNavigate();

navigate('/about', { replace: true });
  • replace - If true, the current entry in the history stack will be replaced instead of adding a new one.
  • state - The state property can be used to set a stateful value for the new location which is stored inside history state. This value can subsequently be accessed via useLocation().
You can find more information on the useNavigate hook in the base React Router documentation

​
Search Params

The useSearchParams hook is used to access the query string parameters of the current location. It returns an array containing an object with the query string parameters and a function to update the query string parameters 
import { useSearchParams } from '@hanabira/router';

export default function Home() {
  const [searchParams, setSearchParams] = useSearchParams();

  return (
    <div>
      <div>Search Params: {JSON.stringify(searchParams)}</div>
      <button onClick={() => setSearchParams({ name: 'Hana' })}>
        Set Search Params
      </button>
    </div>
  );
}