如何使用`createBrowserRouter`将所有内容部署到IPFS网络中？

Question

我用 React 编写了一个简单的应用程序，在这个应用程序中我使用

createBrowserRouter

组件：

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ThirdwebProvider } from "@thirdweb-dev/react";
import { Sepolia } from "@thirdweb-dev/chains";
import "./styles/globals.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import ErrorPage from "./error-page";
import xxx from "./routers/xxx";

const router = createBrowserRouter([
  { path: "/", element: <App />, errorElement: <ErrorPage /> },
  { path: "xxx", element: <xxx /> },
  { path: "xxx/:xxx", element: <xxx /> },
  { path: "xxx/:xxx/:xxx/", element: <xxx /> },
  { path: "xxx/:xxx/:xxx/:xxx", element: <xxx /> },
  { path: "xxx/:xxx", element: <xxx /> },
]);

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
  <React.StrictMode>
    <ThirdwebProvider
      activeChain={Sepolia}
      autoConnect={true}
    >
      <RouterProvider router={router} />
    </ThirdwebProvider>
  </React.StrictMode>
);

reportWebVitals(console.log);

当我部署到 IPFS 网络时，他们会向我提供一个路径链接，如下所示：

"https://ipfs.thirdwebcdn.com/ipfs/hashOfBuildFolder"

根据他们说的文档，要这样做

const router = createBrowserRouter([
  { path: "/", element: <App />, errorElement: <ErrorPage /> },
  { path: "xxx", element: <xxx /> },
  { path: "xxx/:xxx", element: <xxx /> },
  { path: "xxx/:xxx/:xxx/", element: <xxx /> },
  { path: "xxx/:xxx/:xxx/:xxx", element: <xxx /> },
  { path: "xxx/:xxx", element: <xxx /> },
], {
 basename:"/relative/path/"
});

但在这种情况下是构建文件夹的哈希值，每次我更改

basename

的值时，哈希值都会更改，因此链接也会更改。

Answer 1

我切换到createHashRouter所以现在我不再有这个问题了。 这只是避免问题的一种方法，而不是解决方案。

Answer 2

basename:"/relative/path/"

我认为不应该有尾部斜杠，你应该在每条路线中添加斜杠。
例如：

basename

应该是：

basename:"/relative/path"

在对象路径的其余部分应该是：

{ path: "/xxx", ... }