javascript - Github 页面网站不反射(reflect)本地主机的行为

Question

我制作了一个 React 网络应用程序并通过 github 页面托管它，地址为 this link here我有一个标题，可以将您定向到不同的页面。

当网站打开时，它应该默认为主页，标题为“主页”的标题应该突出显示为橙色。当您选择一个链接时，该链接将变为橙色(非常简单)。在本地运行时，它运行良好，并按照我的预期使用react。

但在 GitHub Pages 上，当您直接访问站点或刷新时，它不会默认“选择”任何链接，但当您在初始加载后选择不同的链接时表现良好。

下面的 gif 图像直观地演示了这个问题。右边是本地主机，左边是真实页面:

https://imgur.com/a/YMZ0Hm3

我显然正在尝试修复它，但也想知道到底是什么导致了这个问题，因为这看起来是个小问题。

源码可以是found here .

负责的主要路由代码是 headerComponent

中的这一部分

<Link onClick = {() => this.handleClick(Routes.HOME_PAGE) } className={this.state.url.toLowerCase() === Routes.HOME_PAGE.toLowerCase() ? 'selected':'nope'} to={Routes.HOME_PAGE}>Home</Link>
<Link onClick = {() => this.handleClick(Routes.RESUME_PAGE) } className={this.state.url.toLowerCase() === Routes.RESUME_PAGE.toLowerCase() ? 'selected':'nope'} to={Routes.RESUME_PAGE}>Resume</Link>   
<Link onClick = {() => this.handleClick(Routes.COVER_LETTER_PAGE) } className={this.state.url.toLowerCase() === Routes.COVER_LETTER_PAGE.toLowerCase() ? 'selected':'nope'} to={Routes.COVER_LETTER_PAGE}>Cover Letter</Link> 

其中handleClick(route)只是将this.state.url设置为传入的路由

Answer 1

我想我找到了问题所在。在您所在的州，您有:

this.state = {url: this.fullUrl.substr(this.fullUrl.lastIndexOf("/"), this.fullUrl.length - 1)};

默认情况下，除 url 的最后一部分外，这将切断所有内容。所以如果 URL 是 https://dakotamaker.github.io/resume-site/resume ，它将状态设置为 /resume .

然后在你的<Link> ，您正在检查 state 中的 url 是否与任何路由匹配。假设 process.env.PUBLIC_URL是https://dakotamaker.github.io/resume-site/ ，通过现场加载，您正在检查是否 / , /resume , /coverLetter , 匹配完整的 url 等价物。即:

// before evaluation
className={this.state.url.toLowerCase() === Routes.HOME_PAGE.toLowerCase() ? 'selected':'nope'}

// after evaluation
className={'/resume' === 'https://dakotamaker.github.io/resume-site/resume' ? 'selected':'nope'}

但是当你实际点击一个链接时它会起作用，因为你的 .handleClick函数正在设置 url in state 是您在 Routes 文件中定义的常量。因此，如果您单击“恢复”页面链接，url in 状态设置为 Routes.RESUME_PAGE .因此，当 Links 再次检查是否应添加类名时，可以保证始终选择一个链接。

所以您可能想要做的是不修改用户首次加载的页面的 URL:

this.state = {url: this.fullUrl};