Reactjs react路由器交换机路由在github.io上的gh页面不工作

我在github.io上部署react应用程序时遇到问题

每次启动链接时，我都会加载404页面：myname.github.io/myapp

然后，如果我单击/saved，它会重定向到右侧的“saved”页面，但如果我单击任何“topic”页面，它会再次加载404页面的url:myname.github.io

我已经添加了：gh页面，添加了脚本，并在下面运行npm run deploy

我还添加了path={process.env.PUBLIC_URL+'/'}，但没有任何效果

以下是我的app.js：

更新日期：2018年4月6日

将项目名称添加到公共URL解决了404主页的问题

App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/'} component={Home} />

然而，所有其他链接都指向404页面。我试过：

App.js
<Route exact path={process.env.PUBLIC_URL + '/g4g-debate/saved'} component={Saved} />

或

或

在其他页面：

<Link to={process.env.PUBLIC_URL + '/g4g-debate/saved/'}>User Profile</Link>

或

或

您可以在此处查看它：

您不需要使用process.env.PUBLIC\u URL为每个路由路径添加前缀。路由路径应该是相对的。我建议你把它去掉

您没有在问题中指定process.env.PUBLIC_URL的值，但我猜它是myname.github.io

在任何情况下，你的问题都是因为应用程序处于https://vnndi.github.io/g4g-debate/，但当您单击用户配置文件链接时，它会转到https://vnndi.github.io/saved. 那条路线不匹配。它应该是以下内容：

因此，要解决此问题，请删除process.env.PUBLIC_URL前缀，只需使用：

<Route exact path="/saved" component={Saved} />

---

我知道这是一个老生常谈的问题，你说你放弃了这个问题，但对于那些好奇的人来说：

react router dom支持在路由器对象上设置basename：

<BrowserRouter basename={'/g4g-debate'}>
  <Stuff />
</BrowserRouter>

这将自动将所有的和设置为在路径的开头使用basepath，然后您不再需要手动包含process.env.PUBLIC\u URL

---

至于您得到的404错误，这也可能是由于github页面上的设置造成的。我无法具体地与github交谈，但许多托管服务都有一种设置“错误”页面的方法，当路径与不存在的内容不对应时，它将设置该页面。在一个只有虚拟路径的单页应用程序中，您需要将错误页设置为root index.html文件，这样它将服务于该页，然后react router将处理实际路由。

我只是好奇，为什么您有process.env.PUBLIC\u URL？你不应该需要那个。。。路线应该是相对的。无论如何，process.env.PUBLIC\uURL的价值是什么？谢谢你的回答。我最初有，但它不起作用，所以我寻找答案，一些人建议使用它。而且，即使删除了公共URL，当我第一次点击我的应用程序链接时，它对404也没有帮助。这不仅仅是“保存”页面。@你能尝试使用HashRouter而不是BrowserRouter，并告诉我它是否有效吗？1如果它确实起作用，那么可能与负载平衡有关，GitHub不允许您拥有没有路由的路由。2在这种情况下，您可以在当前定义的process.env.PUBLIC_URL中添加/g4g辩论来解决问题。顺便说一句，请告诉我们该变量的值是多少。我不认为这是一个好的解决方案，但它应该会起作用。我看了这里：但如何使用HashRouter对我来说没有多大意义。此外，我查看了process.env.PUBLIC\u URL的值，但找不到如何检索该值。此外，使用没有PUBLIC\u URL的旧代码，我可以将其部署在heroku上，但不能部署在github.io上。如果你能帮助我在github.io上部署我的应用程序，那就太好了。非常感谢。Route-exact-path={process.env.PUBLIC_-URL+'/g4g-digion/'}组件={Home}/>将我转到主页。然而，所有链接都指向我的404页面。我已经更新了上面的问题。

<Link to={process.env.PUBLIC_URL + '/g4g-debate/saved/'}>User Profile</Link>

<Link to={process.env.PUBLIC_URL + '/saved'}>User Profile</Link>

<Link to='/saved'>User Profile</Link>

<Route exact path="/saved" component={Saved} />

<BrowserRouter basename={'/g4g-debate'}>
  <Stuff />
</BrowserRouter>