推到GH页时IndexRoute不显示

Question

我的问题是，当上传到GH页面时，索引路由呈现的是我的默认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有一个header部分，然后用{this.props.children}的div跟踪它。在GH页面和本地，除了初始呈现时的IndexRoute之外，所有路由都按预期工作。

Answer 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'))

在这个答案中，我对为什么要使用hashhistory做了很长的解释，但它的要点是，当用户导航到应用程序所在的页面时，应用程序应该始终为他们提供服务。应用程序将使用当前URL来确定要呈现的内容。

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