我使用yarn build
构建了react应用程序。为了让应用程序在我的服务器上运行,我向package.json文件添加了"homepage": "./"
。应用程序存储在服务器上的一个文件夹中,我使用https://my-url.com/appname访问应用程序
App.js已呈现,但看不到组件:
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,我看到了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显示应用程序组件,但不呈现主页组件
- https://my-url.com/appname/contact
404
- https://my-url.com/contact
404
单击Home链接后,我得到-https:my-url.com/,其中显示home组件。单击Contact链接后,我得到https://my-url.com/contact,其中显示contact组件
在两个url上重新加载页面得到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": "./"
}
4条答案
按热度按时间vs91vp4v1#
为了让它工作,我做了以下步骤:
.htaccess
文件添加到public
文件夹:package.json
并添加:App.js
中,将文件夹名称添加到<Route path="<<here>>" />
:2ic8powd2#
我在以前的项目中遇到过这个问题,因为它是带有Apache的GoDaddy Linux主机,所以我添加了这一行
“主页”:“my-url.com“到您的package.json
然后我编辑了我的.htaccess文件,在上面添加了我的主路由器
我使用的文件包含以下内容
kdfy810k3#
我认为这可能与React路由器处理客户端渲染或服务器端渲染(SSR)的方式有关。请检查此文档片段,以便为客户端www.example.com正确设置它https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
或者尝试将渲染配置更改为SSR,应该没问题。
rjzwgtxy4#
有同样的问题!我解决了它从
BrowserRouter
切换到HashRouter
在我的App.jsx
。我的FTP不处理BrowserRouter
。在我更新了一切之后,它工作得很好。