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有一个标题部分，然后用{this.props.children}的div跟进。在GH页面和本地所有路由按预期工作，除了初始渲染上的IndexRoute。

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

非常感谢你的帮助！

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文件所在的位置，哈希将用于确定要呈现的路由。

Answer 2

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

这些变化已经解决了GH页面上的渲染问题，现在所有这些变化似乎都运行良好！

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

推送到GH页面时未显示IndexRoute

2 个答案: