Блог

Вещи, которые я пробовал до сих пор:

Изменено "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;
 

пакет.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"
        ]
    }
}
 

манифест.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

В документации по созданию приложения react говорится, что:

Страницы GitHub не поддерживают маршрутизаторы, использующие pushState API истории HTML5 под капотом (например, с помощью маршрутизатора React browserHistory ). Это связано с тем, что при загрузке новой страницы для URL-адреса, например http://user.github.io/todomvc/todos/42, где /todos/42 находится внешний маршрут, сервер страниц GitHub возвращает 404, потому что он ничего не знает /todos/42 . Если вы хотите добавить маршрутизатор в проект, размещенный на страницах GitHub, вот несколько решений:

• Вы можете переключиться с использования API истории HTML5 на маршрутизацию с хэшами. Если вы используете маршрутизатор React, вы можете переключиться на hashHistory него для этого эффекта, но URL-адрес будет длиннее и более подробным (например, http://user.github.io/todomvc/#/todos/42?_k=yknaj). Узнайте больше о различных реализациях истории в маршрутизаторе React.

Поэтому вам следует использовать hashHistory , если вы хотите разместить свой сайт на страницах GitHub. Вот ссылка на документацию.

Если вы не хотите менять маршрутизатор, попробуйте развернуть его на Netlify, который также является другим бесплатным хостинг-провайдером. Но опять же, для развертывания Netlify следуйте документации, в которой говорится:

Для поддержки pushState обязательно создайте public/_redirects файл со следующими правилами перезаписи:

 /*  /index.html  200