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

我制作了一个React web应用程序，并通过github页面托管它，在，我有一个标题，可以将您引导到不同的页面

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

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

下面的gif直观地演示了该问题。Localhost位于右侧，真实页面位于左侧：

显然，我正在尝试修复它，但我也想知道到底是什么导致了这个问题，因为这似乎是一个很小的问题

源代码可以是

负责的主要路线代码是

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> 

this.handleClick（Routes.HOME\u PAGE）}className={this.state.url.toLowerCase（）===Routes.HOME\u PAGE.toLowerCase（）？'selected'：'nope'}to={Routes.HOME\u PAGE}>HOME
this.handleClick（Routes.RESUME\u PAGE）}className={this.state.url.toLowerCase（）==Routes.RESUME\u PAGE.toLowerCase（）？“selected”：“nope”to={Routes.RESUME\u PAGE}>RESUME
this.handleClick（Routes.COVER_LETTER_PAGE）}className={this.state.url.toLowerCase（）==Routes.COVER_LETTER_PAGE.toLowerCase（）？“selected'：“nope”}to={Routes.COVER_LETTER_PAGE}>封面

---

其中handleClick（route）将this.state.url设置为传入的路由

我想我找到了问题所在。在你所在的州，你有：

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

默认情况下，这将切断除url最后一部分之外的所有内容。所以如果URL是

https://dakotamaker.github.io/resume-site/resume

，它将状态设置为

/resume

然后在

中，检查处于状态的url是否与任何路由匹配。假设

process.env.PUBLIC\u 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

设置为您在路由文件中定义的常量。因此，如果单击Resume page链接，处于状态的

url

将设置为

Routes.Resume\u page

。因此，当链接再次检查是否应该添加类名时，可以保证始终选择一个链接

因此，您可能希望不修改用户首先加载的页面的URL：

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

---

原因是您的本地网站位于localhost:3000的根目录下，但您的github页面位于子目录下。要解决这个问题，您应该在路由器组件中添加“basename”道具。应该是这样的

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

---

您是否可以在问题中包含您的React路由器特定代码？您是否可以不使用

链接

组件，而是在生产中设置为

/resume站点

？您是否可以显示设置为

process.env.PUBLIC\u URL

的值？

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