Развертывание на страницах Github - PullRequest
Новая
       6

Развертывание на страницах Github

1 голос
/ 01 февраля 2020

Я создал свое портфолио с реагированием + sass, добавил несколько состояний и jquery анимаций, развернул свое портфолио на Github-страницах. Портфель был сделан только с ReactJS. Когда я открываю ссылку, она выглядит белой, просто с заголовком и значком. Нет ошибки на консоли, кто-нибудь может мне помочь?

Мое приложение. js

import React from 'react';
import {HashRouter as Router, Route} from 'react-router-dom'
import './components/styles/main.scss'
import Home from './components/home'
import Works from './components/works'
import About from './components/about'


function App() {
  return (
    <Router basename={window.location.pathname || ''}>
    <div className="App">
       <Route exact path="/home"  component={Home} />
       <Route exact path="/works" component={Works} />
       <Route exact path="/about" component={About} />
    </div>
    </Router>
  );
}

export default App;

Мой пакет. json

{
  "name": "Portofolio",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://batistatony.github.io/batistaoliveira/home",
  "dependencies": {
    "axios": "^0.19.0",
    "express": "^4.17.1",
    "express-favicon": "^2.0.1",
    "gh-pages": "^2.2.0",
    "jquery": "^3.4.1",
    "node-sass": "^4.13.1",
    "path": "^0.12.7",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "redux": "^4.0.4"
  },
  "scripts": {
    "start": "node server.js",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

ссылка: https://batistatony.github.io/batistaoliveira/home

1 Ответ

1 голос
/ 01 февраля 2020

Замените homepage в пакете. json на ".", например: 

  "homepage": ".",

Это решит проблему с белой страницей, ваш портфель должен быть доступен по адресу: https://batistatony.github.io/batistaoliveira/

Теперь, BrowserRouter response-router-dom не будет хорошо работать с GitHub Pages, вы в настоящее время используете HashRouter, что отлично, просто удалите параметр basename. GitHub Pages не поддерживает функцию перезаписи URL, поэтому вы не сможете использовать BrowserRouter со ссылкой типа: https://batistatony.github.io/batistaoliveira/home, вам нужно будет использовать https://batistatony.github.io/batistaoliveira/# / home (с HashRouter).

...