Github 上的浏览​​器路由器（React 应用程序）无法正常工作

Posted 2023-02-22

【中文标题】Github 上的浏览​​器路由器（React 应用程序）无法正常工作

【英文标题】：Browser Router (React app ) on Github not working

【发布时间】：2021-11-03 03:34:33

【问题描述】：

我有一个小的 React 应用程序项目，我已将它部署在 Github 中。它可以工作，即使我正在使用 import BrowserRouter, Link, Switch, Route from "react-router-dom";路由和工作......对于我的家庭组件，但不适用于其余部分。这是我的代码：`class App extends React.Component

渲染()

 return <div>
   <BrowserRouter basename=process.env.PUBLIC_URL>
       <Switch>
          <Route exact path ="/" component=Show />
          <Route exact path="/contact" component=Contact/>
       </Switch>
   </BrowserRouter>

  </div>

导出默认应用；`

我已经在没有“basename”的本地机器上使用了它并且工作正常。现在，在 github 服务器中，我的问题是，当您访问我的应用程序主 url 时，它当前显示我的第一个组件，但不适用于其他组件“/contact”。我不确定是否必须使用 'https://namegithub.github.io/main-path/) 有效，但其他任何路径 (https://namegithub.github.io/main-path/contact) 无效。

对不起，这是一个愚蠢的问题，但实际上我只是在 React 中迈出第一步。

谢谢！

【问题讨论】：

显然，我们不能在 git hub 中使用 BrowserRouter，因为 github 不支持浏览器历史记录。因此，我们可以使用 HashRouter，它使用 url 的哈希部分来保持 UI 与 URL 同步。所以，我现在的代码是： 它运行良好。

【参考方案1】：

你可以给你这个代码

import BrowserRouter as Router,Switch,Route from 'react-router-dom'
return <div>
   <Router basename=process.env.PUBLIC_URL>
       <Switch>
          <Route exact path ="/" component=Show />
          <Route exact path="/contact" component=Contact/>
       </Switch>
   </Router>

  </div>