Reactjs 如何在嵌入式React应用程序中的页面之间进行路由？

背景：

我正在尝试在我的嵌入式Shopify应用程序中创建一些链接

我明白我不能使用简单的

我想做什么：

我有3个页面（index.js、dashboard.js和support.js）。我希望允许用户从一个页面导航到另一个页面（使用链接和/或按钮）

我的代码：

通过遵循上面的教程，我已经做到了这一点：

// index.js
import { Page, Frame } from "@shopify/polaris";

const Index = () => {
  return (
    <Page>
      <Frame>
        {/* LINK TO DASHBOARD PAGE*/}
        {/* LINK TO SUPPORT PAGE */}
      </Frame>
    </Page>
  );
};

export default Index;

//index.js
从“@shopify/polaris”导入{Page，Frame}”；
常数索引=（）=>{
返回(
{/*指向仪表板页面的链接*/}
{/*链接到支持页*/}
);
};
出口违约指数；

//routes.js
从“React”导入React；
从“react router”导入{Switch，Route，withRouter}；
从“@shopify/app bridge react”导入{ClientRouter，RoutePropagator}；
功能路线（道具）{
const{history，location}=props；
返回(
);
}
使用路由器导出默认值（路由）；

//link.js
从“React”导入React；
从“反应路由器”导入{linkasreactrouterlink}；
常量是外部链接正则表达式=/^（？[a-z][a-z\d+.-]*：\/\/）/；
函数链接（{children，url=”“，external，ref，…rest}）{
if（外部| | IS _外部_链接_正则表达式测试（url））{
rest.target=“_blank”；
rest.rel=“noopener noreferrer”；
返回(
);
}
返回(
{儿童}
);
}
导出默认链接；

附加：

我相信我应该在某个地方实现下面的代码，但我不知道它如何适合使用链接或按钮在页面之间导航

<AppProvider linkComponent={Link}>
  {/* App content including your <Route> components */}
</AppProvider>


您的
链接
似乎只会替换以前从
react路由器
导入的所有
链接
组件。谢谢，@DrewReese-这是否意味着我需要将
包含在某个地方？如果是这样的话，我需要在它里面放些什么呢？另外，我试着简单地在index.js中添加一些类似于
Go to Dashboard
的内容，但没有成功。有什么想法吗？你有没有从
“@shopify/polaris”
导入
AppProvider
，并用它将你的代码包装到路由器中？另外，您是否也有
路由器
组件？因此我假设我需要编辑index.js文件并1）导入AppProvider，2）包含上面的
链接组件
代码，3）创建某种路由器。我有一个ClientRouter.js组件，我从中获得。我走对了吗？
// link.js
import React from "react";
import { Link as ReactRouterLink } from "react-router";

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

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

  return (
    <ReactRouterLink to={url} {...rest}>
      {children}
    </ReactRouterLink>
  );
}

export default Link;

<AppProvider linkComponent={Link}>
  {/* App content including your <Route> components */}
</AppProvider>