React 项目与 react-router-dom 问题与 gh-pages 上的路由答案

【问题标题】：React project with react-router-dom problem with routes on gh-pagesReact 项目与 react-router-dom 问题与 gh-pages 上的路由
【发布时间】：2021-05-21 21:49:33
【问题描述】：

我有一个带有 react-router-dom 库的小型反应项目。这是我的浏览器路由器片段

<BrowserRouter history={history}>
  <Main />
</BrowserRouter >

这是我的主要组件的片段

 <Switch>
    {!user ? (
      <>
        <Route
          path="/login"
          exact
          component={() => (
            <LoginView login={login} loginError={loginError} />
          )}
        />
      </>
    ) : (
      routes.map((route, id) => (
        <Route
          key={id}
          path={route.path ?? null}
          exact={route.exact ? true : false}
          component={() => (
            <>
              <AppTopBar logout={logout} />

              <div className={classes.mainContainer}>
                <route.component logout={logout} user={user} />
              </div>

              <AppFooter />
            </>
          )}
        />
      ))
    )}
  </Switch>

所以基本上我检查用户是否存在，如果是，则转到第一个主页，如果不存在，则转到登录页面。在本地主机上一切正常。当我在 github 页面上上传应用程序时会出现问题。当我转到https://username.github.io/appname 时，它可以正常打开。当我单击按钮转到新页面时，它会将 URL 更改为例如https://username.github.io/newItem 或https://username.github.io/items，但它仍然有效。问题是当我重新加载我得到的页面时：

在需要部署在 github 页面或任何其他地方的 react 组件中使用路由器的最佳方法是什么？我应该如何为其创建路线以使其始终有效？我的路线如下所示：

 const routes = [
      {
        path: "/",
        name: "Home",
        component: HomeView,
        exact: true,
      }
]

【问题讨论】：

标签： reactjs github github-pages react-router-dom router

【解决方案1】：

GitHub Pages 不支持BrowserRouter：

https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing

因此，您需要探索替代方案。这是一个关于使用 HashRouter 的有用答案：

https://stackoverflow.com/a/52024739

【讨论】：

【解决方案2】：

我在某处找到了这样的解决方案：

    <Router basename={process.env.PUBLIC_URL}>
      <Main />
    </Router>

所以我添加了一行： "homepage": "https://username.github.io/appname"

在package.json 文件中

而且效果很好，我可以转到https://username.github.io/appname 并毫无问题地浏览所有应用程序，但是当我重新加载页面时，我立即收到相同的错误：

【讨论】：