曾经尝试使用React Router部署我的多页面React App。部署并发布到github页面后，进入我的应用程序后，我仍然得到完全空白的白屏。我在这里完全不知所措，可以寻求帮助！
这是我进入控制台部署的网址后在控制台中得到的内容
(index):1 Not allowed to load local resource: file:///C:/Users/19496/my-portfolio/src/App.css
main.5c8c6e6f.chunk.css:1 Failed to load resource: the server responded with a status of 404 ()
2.59462e7f.chunk.js:1 Failed to load resource: the server responded with a status of 404 ()
2.cd1c2086.chunk.css:1 Failed to load resource: the server responded with a status of 404 ()
main.900f82dd.chunk.js:1 Failed to load resource: the server responded with a status of 404 ()
2.59462e7f.chunk.js:1 Failed to load resource: the server responded with a status of 404 ()
main.900f82dd.chunk.js:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
(index):1 Not allowed to load local resource: file:///C:/Users/19496/my-portfolio/src/App.css
2.cd1c2086.chunk.css:1 Failed to load resource: the server responded with a status of 404 ()
manifest.json:1 Failed to load resource: the server responded with a status of 404 ()
main.5c8c6e6f.chunk.css:1 Failed to load resource: the server responded with a status of 404 ()
这是我的index.js，我将其从Router更改为HashRouther
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material.js';
import { HashRouter } from 'react-router-dom';
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>
, document.getElementById('root'));
registerServiceWorker();
我的app.js文件
import React, { Component } from 'react';
import './App.css';
import { Layout, Header, Navigation, Drawer, Content, Button, } from 'react-mdl';
import Main from './components/main';
import { Link } from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';
class App extends Component {
render() {
return (
<div className="demo-big-content">
<Layout>
<Header className="header-color" title={<Link style={{textDecoration: 'none', color: 'white'}} to="/">MyPortfolio</Link>} scroll>
<Navigation>
<Link to="/resume">Resume</Link>
<Link to="/projects">Projects</Link>
<Link to="/contact">Contact</Link>
</Navigation>
</Header>
<Drawer title={<Link style={{textDecoration: 'none', color: 'black'}} to="/">MyPortfolio</Link>}>
<Navigation>
<Link to="/resume">Resume</Link>
<Link to="/projects">Projects</Link>
<Link to="/contact">Contact</Link>
</Navigation>
</Drawer>
<Content>
<div className="page-content" />
<Main/>
</Content>
</Layout>
</div>
);
}
}
export default App;
我的package.json文件
{
"homepage":"https://Nickryan13/github.io/deploy-react",
"name": "my-portfolio",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-landing-page": "^2.0.2",
"react-mdl": "^2.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.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"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
App.css
.header-color {
background: #833ab4; /* fallback for old browsers */
background: -webkit-linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to bottom, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.landing-grid {
background: #833ab4; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
text-align: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.projects-grid{
display: flex;
}
.avatar-img{
height: 185px;
padding: 5em;
}
.banner-text{
background-color: black;
opacity: .8;
width: 75%;
margin: auto;
border-radius: 10px;
}
.banner-text h1 {
font-size: 66px;
font-weight: bold;
color: white;
}
.banner-text hr{
border-top: 5px dotted white;
width: 50%;
margin: auto;
}
.banner-text p {
color: white;
font-size: 20px;
padding: 1.5em;
}
.social-links {
display: flex;
justify-content: space-between;
width: 50%;
margin: auto;
}
.social-links i {
color: white;
font-size: 5em;
padding: 8px;
}
.social-link i {
color: red;
font-size: 5em;
padding: 8px;
}
.resume-right-col{
background: #27221F;
color:white;
padding:2em;
}
.contact-body{
margin: auto;
position:fixed;
width: 100%;
height: 100%;
justify-content: center;
padding-top: 2em;
}
.contact-grid{
text-align: center;
justify-content: center;
width: 80%;
height: 550px;
background: white;
color: black;
margin-bottom: 20px;
}
.contact-grid h2{
font-family: Anton, sans-serif;
}
.contact-grid p{
font-family: Oxygen, sans-serif;
font-weight: bold;
}
.contact-grid hr{
border-top: 5px dotted black;
width: 50%;
margin:auto;
}
.contact-list i{
font-size: 66px;
padding-right: 5rem;
}