Rocon Website

useNavigate

useNavigate(): Navigate;

type NavigateFunction = <Match>(
  route: ReactRouteRecord<Match>,
  ...args:{} extends Match ? [] : [match: Match]
) => void;
type Navigate = NavigateFunction & {
  push: NavigateFunction
  replace: NavigateFunction
}

The useNavigate hook returns a navigate function. A navigate function can be used to change the current location. Its first argument is a route record that represents the destination location. If that route record requires a match object, the second argument is a match object for that route.

The returned function has a push property that is an alias of the returned function itself. It also has a replace property that is a variant of the navigate function which replaces the current history entry which instead of pushing to it (in other words, it uses history.replace instead of history.push under the hood).

Example

const toplevelRoutes = Rocon.Path()
  .routes({
    foo: {
      action: () => <FooPage />
    },
    bar: {
      action: () => <BarPage />
    },
  });

const FooPage: React.FC = () => {
  const navigate = useNavigate();
  return (
    <button onClick={() => {
      navigate(toplevelRoutes._.bar);
      // or:
      // navigate.push(toplevelRoutes._.bar);
      // navigate.replace(toplevelRoutes._.bar);
    }}>
      Go to bar
    </button>
  );
};

const BarPage: React.FC = () => {
  return (<p>This is bar</p>);
};

Example 2

const toplevelRoutes = Rocon.Path()
  .routes({
    foo: {
      action: () => <FooPage />
    },
    bar: {}
  });
// /bar requires 'key' in match object
const barRoute = toplevelRoutes._.bar
  .attach(Rocon.Search("key"))
  .action(({ key }) => <BarPage key={key} />);

const FooPage: React.FC = () => {
  const navigate = useNavigate();
  return (
    <button onClick={() => {
      navigate(barRoute, { key: "value" });
    }}>
      Go to bar
    </button>
  );
};

const BarPage: React.FC<{ key: string }> = ({ key }) => {
  return (<p>This is bar. key is {key}</p>);
};