时间戳

首页 > 解决方案 > 在导致 404 的路由内部刷新

reactjs - 在导致 404 的路由内部刷新

问题描述

我正在通过github页面托管一个网站，我可以成功进入该网站。在登陆页面上，我可以毫无问题地刷新，当我转到http://example.com/about并刷新时出现问题，这将引发 404 错误。这是我的路线：

<div className="App">
  <GlobalProvider>
    <Router basename={'/'}>
      <Route path={process.env.PUBLIC_URL + '/'} render={props => <Main {...props} />} />
    </Router>
  </GlobalProvider>
</div>

在我内部还有两条额外的路线，一条通往 /about，另一条通往两条不同的子路线。

<div className="main">
<Route path={process.env.PUBLIC_URL + '/about'} render={props => <About {...props} aboutData={about} />} />

<Route path={process.env.PUBLIC_URL + '/cases/:id'} render={props => <CaseOverlay {...props} />} />
</div>

当我在其中任何一个中刷新时，我得到 404。有类似问题的人被告知将 process.env.PUBLIC_URL 变量与路径一起使用。

在我的 package.json 中，我将主页字段设置为我的 url，如果我没记错的话，应该更改 public_url。

 "homepage": "http://example.com",

当我记录 public_url 变量时，它似乎总是一个空字符串。我不知道是什么导致了这个问题，因为这个解决方案似乎解决了其他人的确切问题。

先感谢您！

编辑：忘记添加单击这些路线的链接按预期工作，但如果我只是直接输入http://example.com/about或在已经在这些路线上刷新时不会。

标签： reactjsreact-routerhttp-status-code-404github-pages

解决方案

GitHub Pages 不支持 React Router。

这里有几个解决方案：

  • 您可以从使用 HTML5 历史 API 切换到使用哈希路由...
  • 或者，您可以使用技巧来教 GitHub Pages 处理 404 ...

推荐阅读