React項(xiàng)目打包發(fā)布到Tomcat頁面空白問題及解決
React項(xiàng)目打包發(fā)布到Tomcat頁面空白
按照教程在APP.js配置了路由，然后命令行執(zhí)行cnpm run build打包，生成build目錄，將其發(fā)布到SSM的webContent目錄下，啟動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)路由為登錄頁面*/}
<Route exact path="/index" component={Home} /> {/*主要組件頁*/}
</div>
</Router>
)
}
}
export default App;在設(shè)置路由時，引入的是BrowserRouter會導(dǎo)致瀏覽器訪問不到相應(yīng)的路由配置，因此需要將BrowserRouter換成HashRouter。
React項(xiàng)目偶現(xiàn)白屏
背景：
- 1.使用Nginx做代理，把瀏覽器請求轉(zhuǎn)發(fā)到COS上。
- 2.React使用browserHistory路由(cdn.com/user/list)方式。
- 3.刷新頁面，偶現(xiàn)白屏
1.React Router
在React項(xiàng)目中，一般有兩種路由方式。
browserHistoryhashHistory
ps: hashHistory 使用如 https://cdn.com/#/users/123 這樣的 URL，取井號后面的字符作為路徑。
browserHistory 則直接使用 https://cdn.com/users/123 這樣的 URL。
2.頁面部署配置
使用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的一個問題
try_files本身是不支持遠(yuǎn)程url的，這時，如果使用COS的話，就會出問題，所以可以這樣寫.
server {
? ...
? location / {
? ? try_files $uri $uri/ /index.html;
? }
? location /index.html {
? ? proxy_pass https://cdn.cos.myqcloud.com/ltz/index.html;
? }
}總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
react的 useReducer 使用場景及替代 useState
useStateuseReducer是 React 提供的狀態(tài)管理 Hook,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-05-05
React使用fullpage.js實(shí)現(xiàn)整屏翻頁功能
最近筆者在完成一個移動端小項(xiàng)目的過程中需要實(shí)現(xiàn)整屏翻頁的效果；調(diào)研完畢之后,最終決定使用pullPage.js實(shí)現(xiàn)此功能,fullPage.js使用起來比較方便,并且官網(wǎng)上也給了在react項(xiàng)目中使用的demo,本文記錄了這個第三方庫的使用過程,感興趣的朋友可以參考下2023-11-11
這篇文章主要介紹了React獲取url后面參數(shù)的值示例代碼,代碼簡單易懂，文末給大家補(bǔ)充介紹了react獲取URL中參數(shù)方法，需要的朋友可以參考下2022-12-12
教你應(yīng)用?SOLID?原則整理?React?代碼之單一原則
這篇文章主要介紹了如何應(yīng)用?SOLID?原則整理?React?代碼之單一原則,今天，我們將從一個糟糕的代碼示例開始，應(yīng)用 SOLID 的第一個原則，看看它如何幫助我們編寫小巧、漂亮、干凈的并明確責(zé)任的 React 組件，需要的朋友可以參考下2022-07-07
react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React事件節(jié)流效果失效的原因及解決，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
React Antd Upload組件上傳多個文件實(shí)現(xiàn)方式
為實(shí)現(xiàn)多文件上傳,需使用beforeUpload和customRequest替代onChange以避免多次調(diào)用問題,并處理文件路徑以兼容Electron不同平臺2025-08-08
這篇文章主要為大家介紹了react native圖片解析流程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
useSWR 是一個 React Hooks,是 HTTP 緩存庫 SWR 的核心方法之一,SWR 是一個輕量級的 React Hooks 庫,通過自動緩存數(shù)據(jù)來實(shí)現(xiàn) React 的數(shù)據(jù)獲取,本文給大家介紹react:swr接口緩存案例詳解,感興趣的朋友一起看看吧2023-11-11
解決React在安裝antd之后出現(xiàn)的Can''t resolve ''./locale''問題(推薦)
這篇文章主要介紹了解決React在安裝antd之后出現(xiàn)的Can't resolve './locale'問題,本文給大家分享解決方案，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05