上传到 gh-pages 时，使用 react-router 的 React 应用程序不会呈现主页组件答案

【问题标题】：React app using react-router is not rendering home component when uploading to gh-pages上传到 gh-pages 时，使用 react-router 的 React 应用程序不会呈现主页组件
【发布时间】：2021-08-26 18:20:01
【问题描述】：

到目前为止我尝试过的事情：

将"start_url": ".", 更改为"start_url": "/", 和"start_url": "/index.html",

使用BrowserRouter 和HashRouter 导入路由器

exact path 在我所有的路线上

将主路径从“/”更改为“/home”，然后从“/”重定向到“/home”

现在它说“找不到站点”，但它正在处理我所做的许多其他部署尝试。除了着陆页之外，其他所有路线通常都能正常工作

应用组件：

import { useState } from 'react';
import { HashRouter as Router, Redirect, Route, Switch } from 'react-router-dom';
import Home from './pages/Home/Home';
import Register from './pages/Register/Register';
import Login from './pages/Login/Login';
import './App.css';
import Navbar from './components/Navbar/Navbar';
import DataContextProvider from './contexts/DataContext.js';

const App = () => {
    return (
        <>
            <DataContextProvider>
                <Router>
                    <Navbar />
                    <Switch>
                        <Route exact path="/" component={Home} />
                        <Route path="/register" component={Register} />
                        <Route path="/login" component={Login} />
                    </Switch>
                </Router>
            </DataContextProvider>
        </>
    );
};

export default App;

package.json:

{
    "name": "authentication",
    "homepage": "https://dmm22.github.io/authentication",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.13.0",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "axios": "^0.21.1",
        "gh-pages": "^3.2.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3"
    },
    "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build",
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

manifest.json：

{
    "short_name": "React App",
    "name": "Create React App Sample",
    "icons": [
        {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
        },
        {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ],
    "start_url": ".",
    "display": "standalone",
    "theme_color": "#000000",
    "background_color": "#ffffff"
}

最近的部署：https://dmm22.github.io/authentication/

Github 仓库：https://github.com/dmm22/authentication

【问题讨论】：

标签： reactjs react-router github-pages

【解决方案1】：

create react app 文档说：

GitHub Pages 不支持使用 HTML5 pushState 的路由器底层历史 API（例如，React Router 使用 browserHistory)。这是因为当有一个新的页面加载像http://user.github.io/todomvc/todos/42 这样的网址，其中/todos/42 是前端路由，GitHub Pages 服务器返回 404 因为它知道没有/todos/42。如果您想将路由器添加到托管的项目在 GitHub Pages 上，这里有几个解决方案：

您可以从使用 HTML5 历史 API 切换到使用哈希路由。如果你使用 React Router，你可以切换到hashHistory 来实现这个效果，但是 URL 会更长更冗长（例如，http://user.github.io/todomvc/#/todos/42?_k=yknaj）。 Read more 关于 React Router 中不同的历史实现。

因此，如果您想在 GitHub Pages 上托管您的网站，您应该使用 hashHistory。这是文档的link。

如果您不想更换路由器，请尝试将其部署在Netlify，这也是另一个免费托管服务提供商。但是对于 Netlify 部署，请遵循 documentation，上面写着：

要支持pushState，请确保使用以下重写规则创建public/_redirects 文件：

/*  /index.html  200

【讨论】：