React GitHub 페이지 에서 index. html 이외 의 경로 에 접근 하 는 방법

문제.
GitHub Pages 가 생 성 한 정적 페이지 는 React SPA 페이지 와 충돌 합 니 다. Pages 가 Nginx 도 안 되 고 Node. js 도 안 되 기 때문에 index. html 루트 를 제외 한 다른 루트 는 404 오류 가 발생 했 습 니 다.
방법.

build 후 index. html 를 404. html 로 복사 하여 어떤 경로 든 페이지 를 찾 지 못 하면 404 페이지 로 이동 합 니 다.예 를 들 어 나의 'VSCode 중국어 커 뮤 니 티'

두 번 째 방법 은 본 주제 와 좀 멀 어서 위의 문 제 를 해결 할 수 없습니다. 해결 방안 을 찾 을 때 다 중 페이지 생 성 설정 을 기록 하고 React 는 다 중 페이지 입 구 를 생 성 합 니 다.프로젝트 는 creat - react - app 비계 생 성, 우선 실행

npm run eject  

다음 config 에서 webpack. config. dev. js 파일 을 수정 합 니 다.

  entry: {
    index: [
      require.resolve('./polyfills'),
      require.resolve('react-dev-utils/webpackHotDevClient'),
      paths.appIndexJs,
    ],
    oauth: [
      require.resolve('./polyfills'),
      require.resolve('react-dev-utils/webpackHotDevClient'),
      paths.appSrc + '/oauth.js',
    ]
  },

plugins 의 HtmlWebpackPlugin 수정

    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["oauth"],
      template: paths.appHtml,
      filename: 'oauth.html'
    }),

config 의 webpack. config. prod. js 파일 을 수정 합 니 다.

  entry:
    {
      index: [
        require.resolve('./polyfills'),
        paths.appIndexJs
      ],
      oauth: [
        require.resolve('./polyfills'),
        paths.appSrc + '/oauth.js'
      ]
    },

plugins 의 HtmlWebpackPlugin 수정

    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["index"],
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),
    new HtmlWebpackPlugin({
      inject: true,
      chunks: ["oauth"],
      template: paths.appHtml,
      filename: 'oauth.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
    }),

webpackDevServer. config. js 수정

   historyApiFallback: {
      disableDotRule: true,
      rewrites: [
        { from: /^\/oauth.html/, to: '/build/oauth.html' }
      ]
    },

src 파일 에 js 단일 파일 oauth. js 페이지 추가

import React from 'react'
import ReactDOM from 'react-dom'
import Oauth from './js/oauth'
import registerServiceWorker from './registerServiceWorker'
ReactDOM.render(, document.getElementById('root'))
registerServiceWorker()

완료, GitHub 주소 "VSCode 중국어 커 뮤 니 티"