如何渲染Shopify Polaris的subNavigation组件并解决路由冲突问题

问题根因 #

这是Shopify Polaris导航组件和App Bridge路由的典型适配问题，核心有两个触发点：

• Polaris的<Navigation>组件要求父导航项的url是其下属所有子导航项url的公共前缀，才能自动识别当前路径、展开对应子导航
• 自行引入的React Router和Shopify App Bridge自带的原生路由逻辑冲突，导致路由匹配异常，子导航对应页面无法正常渲染

解决步骤 #

1. 统一路由方案：移除自行引入的React Router相关配置，全程使用Shopify App Bridge自带的路由能力。Shopify官方脚手架创建的应用默认已经内置了路由封装，直接使用配套的useNavigate钩子处理跳转即可，不要额外加BrowserRouter/HashRouter包裹应用。
2. 修正导航配置：调整父级导航的url为子导航的公共前缀，移除多余的onClick手动切换激活状态的逻辑，交给导航组件原生处理即可，修正后的导航代码参考：

<Navigation location="./">
  <Navigation.Section
    items={[
      {
        url: '/setup',
        icon: SettingsMajor,
        label: 'Setup App'
      },
      {
        url: '/manage',
        label: 'Manage',
        icon: ManagedStoreMajor,
        subNavigationItems: [
          {
            url: '/manage/freeshipping',
            icon: ShipmentMajor,
            label: 'Free Shipping Bar'
          },
          {
            url: '/manage/freesample',
            icon: AddProductMajor,
            label: 'Free Samples'
          }
        ],
      },
      {
        url: '/support',
        label: 'Support',
        icon: CircleInformationMajor,
        subNavigationItems: [
          {
            url: '/support/faq',
            icon: QuestionMarkMinor,
            label: 'FAQ\'s'
          },
          {
            url: '/support/emailus',
            icon: InviteMinor,
            label: 'Email Us'
          }
        ],
      },
    ]}
    separator
  />
</Navigation>

3. 匹配路由渲染规则：使用Shopify配套的路由组件配置页面渲染规则，保证路径和导航url完全对应：

import { Routes, Route } from '@shopify/app-bridge-react';

// 页面渲染配置
<Routes>
  <Route path="/setup" element={<SetupPage />} />
  <Route path="/manage/freeshipping" element={<FreeShippingBarPage />} />
  <Route path="/manage/freesample" element={<FreeSamplePage />} />
  <Route path="/support/faq" element={<FaqPage />} />
  <Route path="/support/emailus" element={<EmailUsPage />} />
</Routes>

配置完成后，点击父级导航会自动展开子导航，点击子项会正确渲染对应组件，不会出现路由冲突问题。

内容的提问来源于stack exchange，提问作者Jaywant Jagtap