React路由器在构建后不会将组件呈现给ftp服务器
我用yarn build开发了react。为了让应用程序在我的服务器上运行，我将"homepage": "./"添加到package.json文件中。该应用程序存储在服务器上的一个文件夹中，我使用https://my-url.com/appname访问该应用程序。
App.js get已经呈现，但我看不到组件：
function App() {
const [navigationState, setNavigationState] = useState(false);
return (
<div className="App">
<Router>
<Header
showNavigation={navigationState}
setShowNavigation={setNavigationState}
/>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/contact" exact component={Contact} />
</Switch>
<Footer />
</Router>
<div className="space"></div>
</div>
);
}在Header组件中，我的链接如下
<Link to="/">Home</Link>
<Link to ="/contact">Contact</Link>当我单击Home时，URL切换到https://my-url.com/，并看到Home。单击Contact后，URL切换到https://my-url.com/contact，我看到了联系人。
我的.htaccess看起来像：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]
</IfModule>我需要做什么，以保持文件夹路径并在第一次调用时呈现主组件？
- https://my-url.com/
404 - https://my-url.com/appname显示应用程序组件，但不呈现主component
- https://my-url.com/appname/contact
404 - https://my-url.com/contact
404
单击我得到的主页链接-显示主组件的https://my-url.com/在单击联系人链接之后，得到显示联系人组件的https://my-url.com/contact
在两个urls上重新加载页面将给出404。
这是我的package.json
{
"name": "appname",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "BROWSER=firefox PORT=2000 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"
]
},
"homepage": "./"
}回答 3
Stack Overflow用户
发布于 2020-10-20 10:05:00
为了使它正常工作，我执行了以下步骤：
- 将
.htaccess文件添加到public文件夹：
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]- 修改
package.json并添加：
"homepage": "http://my-url.com/foldername"将文件夹名添加到<Route path="<<here>>" />中的
<Route path="/foldername/" exact component={Home} />
<Route path="/foldername/contact" exact component={Contact} />Stack Overflow用户
发布于 2020-10-19 12:37:30
我在以前的项目中遇到了这个问题，因为它是带有apache的GoDaddy Linux主机，所以我增加了这一行。
“主页”："my-url.com“转到您的package.json
然后我编辑了我的.htaccess文件，在它上添加了我的主路由。
我使用的文件包含以下内容
RewriteOptions inherit
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . / [L]Stack Overflow用户
发布于 2020-10-20 08:08:26
我认为这可能与反应路由器处理呈现的方式有关，无论是由客户端还是服务器端呈现(SSR)。请检查此docs片段以正确设置客户端https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing。
或者尝试将呈现的配置更改为SSR，这应该是可以的。
https://stackoverflow.com/questions/64389730
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号