推送到 GH 页面时未显示 IndexRoute

Posted 2023-02-22

【中文标题】推送到 GH 页面时未显示 IndexRoute

【英文标题】：IndexRoute not showing when pushing to GH Pages

【发布时间】：2017-05-10 14:27:27

【问题描述】：

我的 React Router 设置有一个小问题，但是在 Stack Overflow 和 GH 上筛选了一段时间后，我无法将我的代码调整为正常工作。

我的问题是，当上传到 GH Pages 时，索引路由会呈现我的默认 NoMatch 组件，而不是我的 Home 组件。在本地服务器上运行相同的应用程序时， localhost:3000 会正确呈现 Home。

我的路线是这样设置的：

ReactDOM.render((
  <Router history=browserHistory>
    <Route path="/" component=App>
      <IndexRoute component=Home />
      <Route path="home" component=Home />
      <Route path="projects" component=Projects /> 
      <Route path="photography" component=Photography />
      <Route path="about" component=About /> 
      <Route path="contact" component=Contact />
      <Route path="creativeprocess" component=CreativeProcess />
      <Route path="readinglist" component=ReadingList />
      <Route path="*" component=NoMatch />
    </Route>
  </Router>),
  document.getElementById('root')

我的 App.js 有一个标题部分，然后在其后面加上一个用于 this.props.children 的 div。在 GH Pages 和本地所有路由都按预期工作，但初始渲染时的 IndexRoute 除外。

如何在推送到 GH Pages 时将 Home 组件设为默认组件？

非常感谢您的帮助！

【问题讨论】：

你有小提琴吗？这会对我们有所帮助。

我认为你可以删除<Route path="home" component=Home />

【参考方案1】：

GitHub Pages 提供静态内容，但您使用的是 browserHistory，这需要服务器上的某种路由器来提供页面。对于静态内容，您应该使用hashHistory。

ReactDOM.render((
  <Router history=hashHistory>
    <Route path="/" component=App>
      <IndexRoute component=Home />
      <Route path="home" component=Home />
      <Route path="projects" component=Projects /> 
      <Route path="photography" component=Photography />
      <Route path="about" component=About /> 
      <Route path="contact" component=Contact />
      <Route path="creativeprocess" component=CreativeProcess />
      <Route path="readinglist" component=ReadingList />
      <Route path="*" component=NoMatch />
    </Route>
  </Router>
), document.getElementById('root'))

我写了一个冗长的解释，说明为什么要在 this answer 中使用 hashHistory，但要点是，当用户导航到您的应用程序所在的页面时，应该始终为他们提供服务你的申请。应用程序将使用当前 URL 来确定要呈现的内容。

对于静态站点，无论路径如何，都没有后端来提供正确的文件。为了保证所有路由都提供正确的内容，您应该使用哈希历史记录。使用hash history时，hash之前的路径就是你的html文件所在的路径，hash会用来决定渲染哪个路由。

【讨论】：

非常感谢保罗的解释！当我在另一个网站上遇到你提到的问题时，我实际上意识到为什么应该使用 hashHistory。因此，如果有人试图链接到我的静态网站上的某些内容，他们将无法正确访问这些内容，这是有道理的。

【参考方案2】：

Arun，因为这与在 GitHub 服务器上呈现应用程序有关，所以我认为小提琴不会在显示问题方面提供太多帮助。不过我确实想通了，我将 Route path="/" 更改为 Route path="/stasreactapp"，这是我在 GitHub 上的存储库的名称，以及 GH 页面 URL 的标识符。这意味着本地服务器需要在“3000/stasreactapp”上运行。然后我将所有子路由更改为“/home”之类的东西，而不仅仅是“home”。

这些更改已经解决了 GH 页面上的渲染问题，现在一切似乎都运行良好！

页面本身位于https://mym1990.github.io/reactstasapp/