React項(xiàng)目打包發(fā)布到Tomcat頁(yè)面空白問題及解決
更新時(shí)間：2023年06月09日 09:09:55 作者：KogRow
這篇文章主要介紹了React項(xiàng)目打包發(fā)布到Tomcat頁(yè)面空白問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
React項(xiàng)目打包發(fā)布到Tomcat頁(yè)面空白
按照教程在APP.js配置了路由，然后命令行執(zhí)行cnpm run build打包，生成build目錄，將其發(fā)布到SSM的webContent目錄下，啟動(dòng)SSM項(xiàng)目后，訪問index.html無內(nèi)容。
原因：APP.js里是這樣寫的：
//根組件
import React from 'react';
import { BrowserRouter as Router,Route} from 'react-router-dom';
import Login from '../commponents/login';
import Home from '../commponents/index';
class App extends React.Component {
render(){
return(
<Router >
<div>
<Route exact path="/" component={Login} /> {/*設(shè)置默認(rèn)路由為登錄頁(yè)面*/}
<Route exact path="/index" component={Home} /> {/*主要組件頁(yè)*/}
</div>
</Router>
)
}
}
export default App;在設(shè)置路由時(shí)，引入的是BrowserRouter會(huì)導(dǎo)致瀏覽器訪問不到相應(yīng)的路由配置，因此需要將BrowserRouter換成HashRouter。
React項(xiàng)目偶現(xiàn)白屏
背景：
- 1.使用Nginx做代理，把瀏覽器請(qǐng)求轉(zhuǎn)發(fā)到COS上。
- 2.React使用browserHistory路由(cdn.com/user/list)方式。
- 3.刷新頁(yè)面，偶現(xiàn)白屏
1.React Router
在React項(xiàng)目中，一般有兩種路由方式。
browserHistoryhashHistory
ps: hashHistory 使用如 https://cdn.com/#/users/123 這樣的 URL，取井號(hào)后面的字符作為路徑。
browserHistory 則直接使用 https://cdn.com/users/123 這樣的 URL。
2.頁(yè)面部署配置
使用Nginx反向代理
server {
? ...
? location / {
? ? try_files $uri /index.html
? }
}使用express，可以使用配置
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
? res.sendFile(path.join(__dirname, 'build', 'index.html'));
});3.try_files的一個(gè)問題
try_files本身是不支持遠(yuǎn)程url的，這時(shí)，如果使用COS的話，就會(huì)出問題，所以可以這樣寫.
server {
? ...
? location / {
? ? try_files $uri $uri/ /index.html;
? }
? location /index.html {
? ? proxy_pass https://cdn.cos.myqcloud.com/ltz/index.html;
? }
}總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React使用有限狀態(tài)機(jī)的實(shí)現(xiàn)示例
本文主要介紹了React使用有限狀態(tài)機(jī)的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
React-redux實(shí)現(xiàn)小案例（todolist）的過程
這篇文章主要為大家詳細(xì)介紹了React-redux實(shí)現(xiàn)小案例（todolist）的過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了antd?upload上傳如何獲取文件寬高問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
React如何利用Antd的Form組件實(shí)現(xiàn)表單功能詳解
這篇文章主要給大家介紹了關(guān)于React如何利用Antd的Form組件實(shí)現(xiàn)表單功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
歡迎來到今天的探險(xiǎn)之旅！在這篇博客中,我們將深入了解 React 中神奇的虛擬DOM,并通過一個(gè)簡(jiǎn)單的例子來揭開其神秘面紗,文中通過代碼示例也講解非常詳細(xì),感興趣的朋友可以參考下2024-01-01
本文介紹了React腳手架（CreateReactApp）的使用指南,包括創(chuàng)建項(xiàng)目、項(xiàng)目結(jié)構(gòu)、常用命令、最佳實(shí)踐、常見問題解決以及腳手架的優(yōu)勢(shì),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-12-12
create-react-app構(gòu)建項(xiàng)目慢的解決方法
這篇文章主要介紹了create-react-app構(gòu)建項(xiàng)目慢的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)Modal彈窗效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。這篇文章主要介紹了ReactJS中的自定義組件的代碼講解,需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了react四大核心內(nèi)容架構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03