Shopify内嵌App中使用Polaris Link组件无法跳转页面的问题求助

大家好，我目前正在开发一个Shopify内嵌App，技术栈用的是Polaris + React，并且采用了文件路由的方式。现在遇到一个棘手的问题：我想在表格里通过Link组件跳转到App内的某个页面，但试了好几种方法都没效果，点击链接完全没反应。

先给大家展示我的相关代码：

PolarisProvider.jsx #

这里我自定义了AppBridgeLink组件，用来处理内嵌App的导航逻辑，然后把它传给Polaris的AppProvider：

import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { AppProvider } from '@shopify/polaris';
import { useNavigate } from '@shopify/app-bridge-react';
import translations from '@shopify/polaris/locales/en.json';
import '@shopify/polaris/build/esm/styles.css';

const AppBridgeLink = ({ url, children, external, ...rest }) => {
  const navigate = useNavigate();

  const handleClick = useCallback(() => {
    console.log('点击事件触发'); // 我特意加了日志，但完全没输出
    navigate(url);
  }, [url]);

  const IS_EXTERNAL_LINK_REGEX = /^(?:[a-z][a-z\d+.-]*:|\/\/)/;

  if (external || IS_EXTERNAL_LINK_REGEX.test(url)) {
    return (
      <a target="_blank" rel="noopener noreferrer" href={url} {...rest}>
        {children}
      </a>
    );
  }

  return (
    <a onClick={handleClick} {...rest}>
      {children}
    </a>
  );
};

AppBridgeLink.propTypes = {
  url: PropTypes.string,
  children: PropTypes.element,
  external: PropTypes.bool,
};

const PolarisProvider = ({ children }) => (
  <AppProvider i18n={translations} linkComponent={AppBridgeLink}>
    {children}
  </AppProvider>
);

PolarisProvider.propTypes = {
  children: PropTypes.element,
};

export default PolarisProvider;

App.jsx #

这里配置了BrowserRouter、AppBridgeProvider、导航菜单，以及实现文件路由的Routes组件：

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { NavigationMenu } from '@shopify/app-bridge-react';
import Routes from './Routes';
import {
  AppBridgeProvider,
  QueryProvider,
  PolarisProvider,
} from './components';

export default function App() {
  const pages = import.meta.globEager('./pages/**/!(*.test.[jt]sx)*.([jt]sx)');

  return (
    <PolarisProvider>
      <BrowserRouter>
        <AppBridgeProvider>
          <QueryProvider>
            <NavigationMenu
              navigationLinks={[
                {
                  label: 'Products',
                  destination: '/',
                },
                {
                  label: 'Catalogues',
                  destination: '/catalogues/main',
                },
                {
                  label: 'Tags',
                  destination: '/tags/tags',
                },
              ]}
              matcher={(link, location) => link.destination === location.pathname}
            />
            <Routes pages={pages} />
          </QueryProvider>
        </AppBridgeProvider>
      </BrowserRouter>
    </PolarisProvider>
  );
}

Routes.jsx #

这是实现文件路由的核心组件，会自动把pages目录下的文件映射为路由：

import React from 'react';
import { Routes as ReactRouterRoutes, Route } from 'react-router-dom';
import PropTypes from 'prop-types';

const Routes = ({ pages }) => {
  const routes = useRoutes(pages);
  const routeComponents = routes.map(({ path, component: Component }) => (
    <Route key={path} path={path} element={<Component />} />
  ));

  const NotFound = routes.find(({ path }) => path === '/notFound').component;

  return (
    <ReactRouterRoutes>
      {routeComponents}
      <Route path="*" element={<NotFound />} />
    </ReactRouterRoutes>
  );
};

function useRoutes(pages) {
  const routes = Object.keys(pages)
    .map((key) => {
      let path = key
        .replace('./pages', '')
        .replace(/\.(t|j)sx?$/, '')
        .replace(/\/ProductsHome\/ProductsHome$/i, '/')
        .replace(/\b[A-Z]/, (firstLetter) => firstLetter.toLowerCase())
        .replace(/\[(?:[.]{3})?(\w+?)\]/g, (_match, param) => `:${param}`);

      if (path.endsWith('/') && path !== '/') {
        path = path.substring(0, path.length - 1);
      }

      if (!pages[key].default) {
        console.warn(`${key} doesn't export a default React component`);
      }

      return {
        path,
        component: pages[key].default,
      };
    })
    .filter((route) => route.component);

  return routes;
}

Routes.propTypes = {
  pages: PropTypes.object,
};

export default Routes;

表格中使用的Link组件 #

这是我在表格单元格里写的跳转链接：

<Link to={`/catalogues/details/${value}`}>{value}</Link>;

现在的问题是：点击这个链接完全没有任何反应，我甚至在AppBridgeLink的handleClick里加了日志，也没有任何输出，就好像点击事件根本没被触发一样。有没有大佬能帮我排查下哪里出问题了？

备注：内容来源于stack exchange，提问作者Vladan Mikic