刷新非根路径网页时出现IPFS resolve错误的原因咨询

IPFS是静态文件系统，你的React应用属于单页应用（SPA），所有路由逻辑都由前端处理。当刷新/singleWatchView/5EKFc6CVM3236asxHx92这类非根路径时，IPFS节点会尝试在你的CID对应目录下查找singleWatchView文件夹，但实际项目中只有根路径的index.html文件，不存在物理的singleWatchView目录，因此触发"找不到链接"的错误。

以下是三种可行的修复方法：

方法1：改用HashRouter #

将React Router的BrowserRouter替换为HashRouter，HashRouter会通过URL中的哈希（#）管理路由，例如路径会变为/#/singleWatchView/5EKFc6CVM3236asxHx92。刷新时浏览器只会请求根路径的index.html，哈希部分由前端路由处理，IPFS不会解析哈希后的内容，因此不会报错。

修改代码：

// 导入HashRouter
import { HashRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Provider store={store}>
      <main className='App App-header'>
        <NavBar />      
        <WatchBrands/>
        <Router>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/createWatchListing' element={<CreateWatchListing />} />
            <Route path=':searchedWatch' element={<SearchedWatches />} />
            <Route path='/singleWatchView/:watchId' element={<SingleWatchView />} />
            <Route path='/login' element={<Login />} /> 
            <Route path='/register' element={<Register />} /> 
            <Route path='/account/:accountId' element={<YourAccount />} />
          </Routes>
        </Router>
      </main>
    </Provider>
  );
}

方法2：添加_redirects文件 #

在React项目的public目录下创建_redirects文件，写入以下内容：

/*    /index.html   200

构建项目后，将包含该文件的静态资源部署到IPFS。部分IPFS网关（如Cloudflare IPFS）会识别这个文件，自动将所有路径的请求重定向到index.html，交由前端路由接管页面渲染。

方法3：配置自定义IPFS网关 #

如果使用自行部署的IPFS网关，可通过反向代理工具（如Nginx）添加路由 fallback 规则，让所有路径请求都返回index.html。示例Nginx配置：

location / {
  try_files $uri $uri/ /index.html;
}

• HashRouter：实现最简单，无需依赖网关，但URL会带有#符号。
• _redirects文件：保持URL干净，无需修改路由代码，但依赖网关支持该特性。
• 自定义网关配置：灵活性最高，适合私有部署场景，但需要运维配置成本。

内容的提问来源于stack exchange，提问作者Louis Cowan