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

Question

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

将"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

Answer 1

创建反应应用程序文档说：

GitHub Pages 不支持使用 HTML5 pushState历史记录 API 的路由器（例如，使用browserHistory的 React Router）。 This is because when there is a fresh page load for a url like http://user.github.io/todomvc/todos/42 , where /todos/42 is a frontend route, the GitHub Pages server returns 404 because it knows nothing /todos/42的。 如果您想将路由器添加到托管在 GitHub 页面上的项目中，这里有几个解决方案：

• 您可以从使用 HTML5 历史 API 切换到使用哈希路由。 If you use React Router, you can switch to hashHistory for this effect, but the URL will be longer and more verbose (for example, http://user.github.io/todomvc/#/todos/42?_k=yknaj ) . 阅读更多关于 React Router 中不同历史实现的信息。

因此，如果您想在 GitHub 页面上托管您的网站，则应该使用hashHistory 。 这是文档的链接。

如果您不想更改路由器，请尝试在Netlify上部署它，它也是另一个免费托管服务提供商。 但是对于 Netlify 部署，请遵循文档，其中说：

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

/*  /index.html  200