How to redirect users to Shopify plan page in a Shopify App using Remix?

I'm developing a Shopify app using Remix, and I want to redirect users to the pricing plan page I've set up for my app in the Shopify admin.

Here's the plan page link: https://admin.shopify.com/store/{store_handle}/charges/{app_handle}/pricing_plans

I'm using App Bridge for managing Shopify functionalities. Below is a simplified version of my App.jsx file:

  <ui-nav-menu>
    <Link to="/app/sections">Sections</Link>
    <Link to="/app/bundles">Bundles</Link>
    <Link to="/app/emails">Email templates</Link>
    <Link to="/app/my-library">My Library</Link>
    <Link to="/app/helpcenter">Help Center</Link>
    <Link to="/app/request-section">Request Section</Link>
    <Link to={`shopify://admin/charges/${appHandle}/pricing_plans`} rel="list">Plans</Link>
  </ui-nav-menu>

However, the above code doesn't seem to work as expected. I'm not sure if I am implementing the redirect correctly using App Bridge. My goal is to redirect the user to the Shopify admin plan page whenever they access the app.

Is there a better approach to handle this, or am I missing something with App Bridge?

Any help or guidance would be greatly appreciated!

I am unable to redirect to the Shopify payment page from the app.jsx file. I have created a new app.pricing.jsx page and added it to the app.jsx file. Now redirect the user to the Shopify payment page from the pricing page. Below is the code for my app.pricing.jsx page code.

import { authenticate } from "~/shopify.server";
import { useLoaderData } from "@remix-run/react";
import {get_shop} from "../model/API";

export async function loader({ request }) {
  try {
    const { session, admin } = await authenticate.admin(request);
    const shop = session?.shop;

    if (!shop) {
      throw new Error("Shop information not found in session");
    }

    const shop_name = shop.split(".")[0];
    const app_name = process.env.APP_NAME;

    let shop_data = await get_shop(admin.rest, session);
    shop_data = await shop_data?.data[0];

    const data = {};
    data['shop_name'] = shop_name;
    data['app_name']  = app_name;
    return { data }

  } catch (error) {
    console.error("Error in loader:", error);
    return { data: { shop_name: null, app_name: null, error: error.message } };
  }
}

const Plan = () => {
  const { data } = useLoaderData();

  const shop_name = data?.shop_name;
  const app_name  = data?.app_name;

  console.log('allow_subscription====>', allow_subscription);

  if (shop_name && app_name) {
    try {
      open(`https://admin.shopify.com/store/${shop_name}/charges/${app_name}/pricing_plans`, "_top");
    } catch (redirectError) {
      console.error("Error during redirection:", redirectError);
      return <div>Failed to redirect. Please try again later.</div>;
    }
  } else {
    return <div>Shop or app information is missing. Please check your configuration.</div>;
  }

  return null;
};

export default Plan;

<ui-nav-menu>
  <Link to="/app/pricing">Pricing</Link>
</ui-nav-menu>