基于 ReactTS 的 chrome 扩展中的路由答案

【问题标题】：Routes in ReactTS based chrome extension基于 ReactTS 的 chrome 扩展中的路由
【发布时间】：2023-02-18 14:54:16
【问题描述】：

我对使用 react-router 创建路由的过程有点困惑，而且似乎几乎没有任何关于 react-router 和 chrome 扩展的信息，如果你最终找到了一些东西，那么它已经严重过时了。

混淆的发生是因为当扩展加载（加载弹出脚本）时，它与浏览器分离，并且没有实际的 url。这都是“本地”的，在安装中。

假设我有一个 index.tsx 文件，我从那里开始我的身份验证过程，前往不同的“页面”（扩展中加载的组件），在我的扩展中路由的最佳实践是什么？

问候：_）

【问题讨论】：

您需要在路由器 IIRC 中使用哈希模式。请注意，弹出窗口确实是一个单独的页面，具有自己的 chrome-extension:// URL，这就是网页的标准路由不起作用的原因（扩展页面没有服务器，它们就像 file://页面但有特权）。
你想出什么了吗？我也在寻找答案。
是的。现在会写一个正确的答案，以便它可以提供帮助。

【解决方案1】：

由于 chrome 扩展程序在本地运行（您正在创建构建——然后通过浏览器中的扩展选项加载构建文件夹），因此公共路由并不是很有用，因为没有与服务器的实际通信，或到达的真正终点.. 这就是我使用HashRouter by ReactRouter 的原因。

用法超级简单，下面是一个用法示例：

导入以下两个组件

从 'react-router-dom' 导入 { RouterProvider, createHashRouter };
如果您希望路由在您的应用程序中无处不在，那么在您使用“ReactDOM.createRoot”的索引文件中，创建一个“createHashRouter 对象”，它定义了您可能的路由，以及它们应该在该特定路由中启动的内容:

const router = createHashRouter([{ 小路： ”/”，元素：， }, { 路径：“/登录”，元素： }, { 路径：“/设置”，元素： }, { 路径：“/应用程序”，元素： }])
通过使用 RouterProvider 并为其提供创建的路由对象，为您的所有应用程序提供路由选项：

root.render( <React.StrictMode> </React.StrictMode> );

祝你好运！

【讨论】：