[英]React Router doesn't render components after build to ftp server
I built react app with yarn build
.我用
yarn build
了 React 应用程序。 To get the app running On my server, I added "homepage": "./"
to the package.json file.为了让应用程序在我的服务器上运行,我将
"homepage": "./"
添加到 package.json 文件中。 The app is stored in a folder on the server, and I access the app with https://my-url.com/appname该应用程序存储在服务器上的一个文件夹中,我使用https://my-url.com/appname访问该应用程序
The App.js get's rendered, but I don't see my components: 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>
);
}
In the Header
component I have my links like在
Header
组件中,我有类似的链接
<Link to="/">Home</Link>
<Link to ="/contact">Contact</Link>
When I click on Home
the URL switches to https://my-url.com/ and I see the Home component.当我单击
Home
时,URL 切换到https://my-url.com/ ,我看到了 Home 组件。 After clicking on Contact
the URL switches to https://my-url.com/contact and I see the contact.单击“
Contact
”后,URL 切换到https://my-url.com/contact ,我看到了联系人。
My .htaccess looks like:我的 .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>
What do I need to do, to keep the folder path and render the home component on the first call?我需要做什么才能保留文件夹路径并在第一次调用时呈现主组件?
404
404
404
404
404
404
After clicking on the Home link I get -https://my-url.com/ showing the home component After that clicking the Contact link, I get https://my-url.com/contact showing the contact component单击主页链接后,我得到 -https://my-url.com/ 显示主页组件单击联系人链接后,我得到https://my-url.com/contact显示联系人组件
Reloading the page on both urls gives 404
.重新加载两个网址上的页面都会出现
404
。
This is my package.json
:这是我的
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": "./"
}
I faced this problem in previous project because it was GoDaddy Linux host with apache so I added this line我在之前的项目中遇到了这个问题,因为它是带有 apache 的 GoDaddy Linux 主机,所以我添加了这一行
"homepage": "my-url.com" to your package.json
"homepage": "my-url.com" 到你的 package.json
then I edited my .htaccess file added my main rout on it然后我编辑了我的 .htaccess 文件,在它上面添加了我的主要路由
the file I used has this content我使用的文件有这个内容
RewriteOptions inherit
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . / [L]
I think it might be related to the way the react-router is handling rendering either by the client or server-side rendering (SSR).我认为这可能与 react-router 通过客户端或服务器端渲染 (SSR) 处理渲染的方式有关。 Please check this docs fragment to set it up correctly for client-side https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
请检查此文档片段以正确设置客户端https://create-react-app.dev/docs/deployment/#serving-apps-with-client-side-routing
or Try to change the config of rendering to SSR and it should be okay.或者尝试将渲染的配置更改为SSR,应该没问题。
To get it working, I did the following steps:为了让它工作,我做了以下步骤:
.htaccess
file to public
folder:.htaccess
文件添加到public
文件夹:Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
package.json
and add:package.json
并添加:"homepage": "http://my-url.com/foldername"
App.js
add the folder name to the <Route path="<<here>>" />
:App.js
将文件夹名称添加到<Route path="<<here>>" />
:<Route path="/foldername/" exact component={Home} />
<Route path="/foldername/contact" exact component={Contact} />
Same problem for me, i had to switch in App.jsx BrowserRouter to HashRouter (my ftp doesn't handle BrowserRouter), and after everything works fine.对我来说同样的问题,我不得不将 App.jsx BrowserRouter 切换到 HashRouter(我的 ftp 不处理 BrowserRouter),并且在一切正常之后。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.