DEV Community

ccsunny
ccsunny

Posted on

1

How to navigate between Shopify app

To redirect to a new page when a button is clicked in a Remix application, you can use the useFetcher hook or a simple button with an onClick handler. Below are two approaches:

Approach 1: Using useFetcher

import { useFetcher } from "@remix-run/react";

function MyButton() {
    const fetcher = useFetcher();

    const handleClick = () => {
        fetcher.load('/new-url'); // Replace with your target URL
    };

    return (
        <fetcher.Form method="post" onSubmit={handleClick}>
            <button type="button" onClick={handleClick}>
                Go to New Page
            </button>
        </fetcher.Form>
    );
}
Enter fullscreen mode Exit fullscreen mode

Approach 2: Using a Simple Button with useNavigate

If you want a simpler approach without using useFetcher, you can use useNavigate from Remix:

import { useNavigate } from "@remix-run/react";

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

    const handleClick = () => {
        navigate('/new-url'); // Replace with your target URL
    };

    return (
        <button onClick={handleClick}>
            Go to New Page
        </button>
    );
}
Enter fullscreen mode Exit fullscreen mode

Explanation
Approach 1: useFetcher is useful if you want to perform actions that might need to submit data or trigger a loader.
Approach 2: useNavigate is a straightforward way to navigate to a new URL without needing to submit any data.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay