javascript - 推送到GH页面时未显示IndexRoute

我的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和local上，除初始渲染时的IndexRoute之外，所有路由均按预期工作。

推送到GH Pages时，如何使Home组件成为默认组件？

非常感谢你的帮忙！

最佳答案

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确定要呈现的内容。

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