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

Question

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

我的问题是，上传到 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 外，所有路由均按预期工作。

推送到 GH 页面时如何将主页组件设置为默认组件？

非常感谢您的帮助!

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

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

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