推送到 GH Pages 时不显示 IndexRoute

Question

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

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

我的路线是这样设置的：

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 有一个 header 部分，然后是 div 用于 {this.props.children}。在 GH 页面和本地，所有路由都按预期工作，但初始渲染时的 IndexRoute 除外。

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

非常感谢您的帮助！

Answer 1

A运行，因为这是关于在 GitHub 服务器上呈现应用程序，我认为 fiddle 不会提供太多显示问题的信息.不过我确实弄明白了，我将 Route path="/" 更改为 Route path="/stasreactapp"，这是我在 GitHub 上的存储库的名称，以及 GH 页面的标识符 URL .这意味着本地服务器需要在“3000/stasreactapp”上运行。然后我将所有子路径更改为类似“/home”的内容，而不仅仅是 "home"。

这些更改已经解决了 GH 页面上的渲染问题，现在一切正常！

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

Answer 2

GitHub 页面提供静态内容，但您使用的 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'))

我写了一篇关于为什么要在中使用 hashHistory 的长篇解释，但其要点是当用户导航到托管您的应用程序的页面时，他们应该始终为您的应用程序提供服务。应用程序将使用当前 URL 来确定要呈现的内容。

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

推送到 GH Pages 时不显示 IndexRoute

IndexRoute not showing when pushing to GH Pages

javascript

router

github-pages

reactjs

react-router