我的 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 页面时如何将主页组件设置为默认组件?
非常感谢您的帮助!
最佳答案
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 文件所在的位置,哈希将用于确定渲染哪条路由。
关于javascript - 推送到 GH 页面时 IndexRoute 不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41325890/