[英]Can't deploy React App on Github Pages. App doesn't get injected into <div id=“app”/>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>My App</title>
<link href="styles.css" rel="stylesheet"></head>
<body>
<p>Hello gh-pages!</p>
<div id="app"></div>
<script type="text/javascript" src="transformed.js"></script>
</body>
</html>
This is my index.html , stored on gh-pages branch along with styles.css and transformed.js which i've copied from the build folder on master branch. 这是我的index.html ,与我从master分支的build文件夹复制的styles.css和transformd.js一起存储在gh-pages分支中 。 Nothing else on gh-pages branch. gh-pages分支上没有其他内容。 When i navigate to https://krasnokutskiyea.github.io/myProj/ i see only Hello gh-pages!, but my actual react app doesn't get injected into div id="app" . 当我导航到https://krasnokutskiyea.github.io/myProj/时,我只看到Hello gh-pages !,但是我的实际react应用程序没有注入div id =“ app” 。 No errors in console. 控制台中没有错误。 Any ideas how to solve it? 有什么想法如何解决吗? My package.json from the master branch: 我来自master分支的package.json:
{
"name": "newapp",
"version": "1.0.0",
"description": "myfirstapp",
"main": "index.js",
"homepage": "https://krasnokutskiyea.github.io/myProj",
"scripts": {
"build": "webpack",
"build:stats": "webpack --env production --json > stats.json",
"start": "webpack-dev-server",
"lint": "eslint .",
"deploy": "gh-pages -d build"
},
"author": "evgeny krasnokutskiy",
"license": "ISC",
"dependencies": {
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"redux": "^4.0.0",
"redux-act": "^1.3.2",
"redux-form": "^7.1.0",
"redux-saga": "^0.16.0",
"superagent": "^3.6.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-eslint": "^8.0.0",
"babel-loader": "^7.0.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"css-loader": "^0.28.5",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"gh-pages": "^1.2.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.21.0",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
}
}
Webpack config: Webpack配置:
const HTMLWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')
const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: path.join(__dirname, '/app/index.html'),
filename: 'index.html',
inject: 'body',
})
module.exports = {
entry: ['babel-polyfill', path.join(__dirname, '/app/index.js')],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}, {
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?modules,localIdentName="[name]-[local]-
[hash:base64:6]"',
}),
}],
},
output: {
filename: 'transformed.js',
path: path.join(__dirname, '/build'),
publicPath: '/',
},
devServer: {
historyApiFallback: true,
},
plugins: [
HTMLWebpackPluginConfig,
new ExtractTextPlugin('styles.css'),
],
mode: 'production',
}
my app/index.js: 我的app / index.js:
/* eslint-env node */
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, compose, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import createSagaMiddleware from 'redux-saga'
import { BrowserRouter, Route } from 'react-router-dom'
import allReducers from './reducers/index'
import RootSaga from './sagas/index'
import EntryPage from './containers/EntryPage'
// CREATING STORE AND SAGA
const saga = createSagaMiddleware()
const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(allReducers,
composeEnchancers(applyMiddleware(saga)))
saga.run(RootSaga)
// RENDERING ROOT COMPONENT
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<div>
<Route exact path="/" component={EntryPage} />
</div>
</BrowserRouter>
</Provider>,
document.getElementById('app'),
)
Your Route
with path="/"
will not work since the base of your webpage is /myProj
. 您的path="/"
Route
将不起作用,因为您的网页的基础是/myProj
。
You can fix this by giving your BrowserRouter
a basename
of /myProj
: 您可以通过将BrowserRouter
的basename
为/myProj
来解决此/myProj
:
ReactDOM.render(
<Provider store={store}>
<BrowserRouter basename="/myProj">
<div>
<Route exact path="/" component={EntryPage} />
</div>
</BrowserRouter>
</Provider>,
document.getElementById('app'),
)
The problem is with your router/path. 问题出在您的路由器/路径上。
Your React app is rendering, but your single route doesn't match your url path: 您的React应用正在渲染,但是您的单个路由与您的网址路径不匹配:
<Route exact path="/" component={EntryPage} />
This won't work because your app is on /myProj/
. 由于您的应用程序位于/myProj/
上,因此/myProj/
。
Changing your route path to /myProj/
would fix it. 将路由路径更改为/myProj/
解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.