reactjs - Parcel/React App 在本地主机上工作,但在服务器上不工作
问题描述
我有一个 Parcel/React 应用程序,我正在尝试将其投入生产。经过测试,我发现我的导航在服务器(404s)上不再起作用。
我正在像这样使用 React Router:
<Suspense fallback={<div>Loading...</div>}>
<Router primary={false}>
<Home path="/" />
<About path="/about" />
<Portfolio path="work" />
<Contact path="/contact" />
</Router>
</Suspense>
我按照另一个线程中的建议将主页添加到我的 package.json 中,但仍然没有运气。
"homepage": "."
我对 IIS 管理器或类似的东西没有任何经验,所以我很犹豫要在那里进行任何服务器更改,特别是因为我在同一台服务器上有其他网站。
代码/构建中有什么可以在服务器上完成的工作,还是需要更改 IIS?
这是我的 package.json:
{
"name": "ericbelldesigns",
"version": "1.0.0",
"description": "Eric Bell Designs 2020",
"main": "src/App.js",
"dependencies": {
"@frontendmasters/pet": "^1.0.3",
"@reach/router": "^1.3.1",
"anime": "^0.1.2",
"axios": "^0.19.2",
"bezier-easing": "^2.1.0",
"charming": "^3.0.1",
"gsap": "^2.1.3",
"gsap-react-plugin": "^1.0.2",
"imagesloaded": "^4.1.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"three": "^0.106.2",
"three-obj-loader": "^1.1.3",
"three-orbit-controls": "^82.1.0"
},
"browserslist": [
"last 2 Chrome versions",
"last 2 ChromeAndroid versions",
"last 2 Firefox versions",
"last 2 FirefoxAndroid versions",
"last 2 Safari versions",
"last 2 iOS versions",
"last 2 Edge versions",
"last 2 Opera versions",
"last 2 OperaMobile versions"
],
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"animejs": "^3.1.0",
"babel-eslint": "^10.0.3",
"cross-env": "^5.2.1",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.3.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.0",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^1.6.1",
"parcel-bundler": "^1.12.4",
"parcel-plugin-html-externals": "^0.1.2",
"postcss-modules": "^1.5.0",
"prettier": "^1.19.1",
"sass": "^1.26.0",
"threejs-controls": "^1.0.6"
},
"scripts": {
"dev": "parcel src/index.html",
"dev:mock": "cross-env PET_MOCK=mock npm run dev",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "echo \"Error: no test specified\" && exit 1",
"production": "parcel build src/index.html"
},
"externals": {
"/images/**/*": false
},
"author": "Eric Bell <eric@ericbelldesigns.com>",
"license": "Apache-2.0",
"keywords": []
}
解决方案
如果您导入BrowserRouter
了更改它HashRouter
,看看是否有帮助。
推荐阅读
- list - Ansible 列表以 dict 和递增每个元素的值
- wpf - WPF:仅当列表框中的一项被选中时才启用按钮
- ionic-framework - 为什么加载 Ion-Spinner 会在页面底部呈现
- ios - 文件“ColorAttributeTransformer.swift”无法解锁
- python-xarray - 使用 Xarray 查找十年平均值
- ruby-on-rails - 如何使用带有导轨的 jsonb 字段更新模型
- micrometer - 更新千分尺会阻塞调用线程吗?
- vuex - 为什么这个 vuex 计算的 getter 没有反应?
- gradle - 如何在同一个 gradle 项目的另一个模块中使用独立的 gradle 插件?
- python - 将多个关键字添加到 if 语句中的更有效方法