reactjs 部署React应用程序时，React Router到Github页面不工作

zzlelutf 于 2023-05-06 发布在 React

关注(0)|答案(1)|浏览(166)

我有一个React应用程序（带有vite和typescript），在使用npm run dev时运行良好。主页也可以在github页面上正确显示。
但似乎只要我试图重定向到产品页面或联系页面，它就给了我一个404。我是React的初学者，这真的让我感到困惑（特别是因为它在运行开发模式下工作得很好）。
App.tsx

import { BrowserRouter, Route, Routes } from "react-router-dom";

return (
    <div>
      <Header />
      <Cart cartItems={cartItems} setCartItems={setCartItems} />
      <Routes>
        <Route path="/shopping-cart" element={<Main />} />
        <Route
          path="shopping-cart/products"
          element={<Products setCartItems={setCartItems} />}
        />
        <Route path="shopping-cart/contact" element={<Contact />} />
      </Routes>
      <Footer />
    </div>
  );
}

main.tsx:

import { BrowserRouter } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

vite配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/shopping-cart/',
  plugins: [react()],
})

(Full代码https://github.com/Fibox-coder/shopping-cart）
我尝试了很多东西，比如使用Switch而不是Routes，使用HashRouter而不是BrowserRouter，但似乎都不起作用。
我在Github页面上点击导航栏时有3个URL：

**作品：**首页= https://fibox-coder.github.io/shopping-cart/
**404文件未找到：**产品= https://fibox-coder.github.io/shopping-cart/products/联系人= https://fibox-coder.github.io/shopping-cart/contact

reactjs

来源：https://stackoverflow.com/questions/76181091/deploy-react-app-with-react-router-to-github-pages-not-working

1条答案

按热度按时间

bqucvtff1#

React App必须为生产构建，所以你应该使用www.example.com教程中的Github Actionvitejs.dev。这是我的方式，对我来说很好。
vite.config.js中的Config帮助自动设置基本路径：

import { defineConfig } from "vite";
import { fileURLToPath } from "url";
import path from "path";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "~": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"),
    },
  },
  base: process.env.NODE_ENV === "production" ? "/shopping-cart/" : "",
});

您应该使用.github/workflows/gh-page.yml创建Github Action，用于自动化更新“gh-pages”分支：

name: Deploy GH Pages

on: push

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: Install
        run: yarn

      - name: Build
        run: yarn build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          folder: dist

进入设置-〉页面-〉将分支更改为“gh-pages”，与上面的BRANCH相同，只有在您将代码推送到Github后才能工作（Github Action创建“gh-pages”，并在Github Action运行大约1分钟后工作）

更多信息：https://vitejs.dev/guide/static-deploy.html#github-pages

赞(0）回复(0）举报 2023-05-06

我来回答

reactjs 部署React应用程序时，React Router到Github页面不工作

1条答案

相关问题

热门标签

最新问答