Skip to main content
The useGo hook provides a flexible way to navigate programmatically. It supports both string-based URLs and resource-based navigation.

Usage

import { useGo } from "@refinedev/core";

const go = useGo();

Return Value

Returns a function that accepts a navigation configuration object.

Parameters

Resource Object

When passing a resource object to to, use the following structure:

Examples

import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  const handleNavigate = () => {
    go({
      to: "/posts",
      type: "push",
    });
  };

  return <button onClick={handleNavigate}>Go to Posts</button>;
};
import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  const handleEdit = () => {
    go({
      to: {
        resource: "posts",
        action: "edit",
        id: "1",
      },
      type: "push",
    });
  };

  return <button onClick={handleEdit}>Edit Post</button>;
};

Get Path Without Navigating

import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  const getEditPath = () => {
    const path = go({
      to: {
        resource: "posts",
        action: "edit",
        id: "1",
      },
      type: "path",
    });
    
    return path; // Returns the path string
  };

  return (
    <a href={getEditPath()}>Edit Post</a>
  );
};

With Query Parameters

import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  const handleNavigate = () => {
    go({
      to: "/posts",
      query: {
        page: 1,
        pageSize: 10,
        sort: "createdAt",
      },
      type: "push",
    });
  };

  return <button onClick={handleNavigate}>Go to Posts</button>;
};

With Hash Fragment

import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  const handleNavigate = () => {
    go({
      to: "/posts/1",
      hash: "comments",
      type: "push",
    });
  };

  return <button onClick={handleNavigate}>View Comments</button>;
};

Keep Existing Parameters

import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  const handleNavigate = () => {
    go({
      to: "/posts/1",
      options: {
        keepQuery: true, // Preserve current query params
        keepHash: true,  // Preserve current hash
      },
      type: "push",
    });
  };

  return <button onClick={handleNavigate}>Navigate</button>;
};

Replace History Entry

import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  const handleNavigate = () => {
    go({
      to: "/dashboard",
      type: "replace", // Replaces current history entry
    });
  };

  return <button onClick={handleNavigate}>Go to Dashboard</button>;
};
import { useGo } from "@refinedev/core";

const MyComponent = () => {
  const go = useGo();

  return (
    <div>
      <button onClick={() => go({ to: { resource: "posts", action: "list" } })}>
        List Posts
      </button>
      
      <button onClick={() => go({ to: { resource: "posts", action: "create" } })}>
        Create Post
      </button>
      
      <button onClick={() => go({ to: { resource: "posts", action: "edit", id: "1" } })}>
        Edit Post 1
      </button>
      
      <button onClick={() => go({ to: { resource: "posts", action: "show", id: "1" } })}>
        Show Post 1
      </button>
      
      <button onClick={() => go({ to: { resource: "posts", action: "clone", id: "1" } })}>
        Clone Post 1
      </button>
    </div>
  );
};

Type Definitions

type GoConfig = {
  to?: string;
  query?: Record<string, unknown>;
  hash?: string;
  options?: {
    keepQuery?: boolean;
    keepHash?: boolean;
  };
  type?: "push" | "replace" | "path";
};

type Resource = ResourceWithoutId | ResourceWithId;

type ResourceWithoutId = {
  resource: string;
  action: "create" | "list";
  id?: never;
  meta?: Record<string, unknown>;
};

type ResourceWithId = {
  resource: string;
  action: "edit" | "show" | "clone";
  id: BaseKey;
  meta?: Record<string, unknown>;
};

type GoConfigWithResource = Omit<GoConfig, "to"> & {
  to?: GoConfig["to"] | Resource;
};

type BaseKey = string | number;
type Action = "create" | "edit" | "list" | "show" | "clone";

See Also

Build docs developers (and LLMs) love