如何使用createBrowserRouter将React应用部署到IPFS网络？

你遇到的核心矛盾是IPFS内容哈希与createBrowserRouter的basename参数绑定导致的循环变更——哈希由内容决定，修改basename等于修改内容，哈希必然跟着变化，进而又要调整basename。解决关键是不要把IPFS哈希作为basename的值，改用以下实用方案：

方案1：使用相对路径路由 #

直接将basename设为空字符串（或省略该参数），同时确保所有路由链接采用相对路径写法：

• 路由配置示例：

  const router = createBrowserRouter(
    [
      {
        path: '/',
        element: <Root />,
        children: [
          { path: 'about', element: <About /> },
          { path: 'posts/:id', element: <Post /> },
        ],
      },
    ],
    { basename: '' } // 留空或直接省略该配置项
  );
  

• 页面内跳转用相对路径的<Link>：

  // 正确写法
  <Link to="./about">关于页</Link>
  <Link to="./posts/123">文章详情</Link>
  
  // 避免绝对路径写法（会在IPFS网关路径下出错）
  // <Link to="/about">
  

这种方式下，路由会基于当前页面的相对路径匹配，不管IPFS网关挂载的路径是/ipfs/xxx还是其他，都能正常工作，完全不需要依赖哈希作为basename。

方案2：添加路由 fallback 配置 #

为避免刷新页面时出现404（IPFS网关默认不会将非根路径请求转发到index.html），需要在构建产物中添加重写规则：

• 若使用Vite，在public文件夹下创建_redirects文件，内容为：

  /* /index.html 200
  

• 若使用Create React App，可手动在build文件夹下添加上述_redirects文件，确保所有路由请求都fallback到index.html，保证单页应用的路由逻辑正常运行。

方案3：用IPNS固定访问链接（可选） #

如果需要固定的访问链接，不用每次更新都更换哈希地址，可以把IPFS哈希绑定到IPNS名称。IPNS是IPFS的命名系统，你可以将更新后的IPFS哈希重新指向同一个IPNS名称，用户访问IPNS链接时会自动跳转到最新的IPFS内容。这种场景下依然推荐搭配方案1的相对路径路由，无需修改basename。

为什么不能用哈希当basename？ #

IPFS的内容哈希（CID）是基于文件内容生成的哈希值，任何内容变更（包括修改basename参数）都会生成新的CID。将CID作为basename的值，本质是让内容依赖自身的哈希，必然陷入“改哈希→内容变→哈希又变”的循环，这是IPFS内容寻址的特性决定的，从根本上不可行。

内容的提问来源于stack exchange，提问作者Riccardo Belingheri