Question

我制作了一个React Web应用程序，并通过github页面在this link here上托管了它，并且我有一个标头，可将您定向到其他页面。

打开网站后，它应默认为主页，标题为“主页”的标题应突出显示为橙色。当您选择一个链接时，该链接将变为橙色（非常简单）。在本地运行时，它可以正常运行并做出我所期望的反应。

但是在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为https://dakotamaker.github.io/resume-site/resume，则它将状态设置为/resume。

然后在<Link>中，您要检查状态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的状态设置为您在Routes文件中定义的常数。因此，如果单击“恢复页面”链接，则状态为url的设置为Routes.RESUME_PAGE。因此，当链接再次检查是否应添加类名时，可以确保始终选择一个链接。

因此，您可能想要做的是不修改用户首先加载的页面的URL：

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

Answer 2

原因是您的本地网站位于localhost：3000的根目录上，而您的github页面位于子目录中。为了解决这个问题，您应该在路由器组件中放置“ basename”属性。应该是这样的东西

<Router history={browserHistory} basename={'resume-site'}>
  <Route path="/" component={App} />
</Router>

我发现您已将基本名称设置为env var。因此，只需在编辑时通过package.json注入它即可：

 "deploy": "PUBLIC_URL=resume-site gh-pages -d build"

Git Hub页面网站未反映本地主机的行为

2 个答案: