如何使用' 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

basename:"/relative/path/"我认为这里不应该有尾斜杠，你应该在每个路由中添加斜杠，例如Basename应该是:Basename:"/relative/path"在其他对象的路径应该是{path: "/xxx"，

Answer 2

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