React反向代理及樣式獨立詳解
更新時間：2022年08月04日 09:59:19 作者：你華還是你華
這篇文章主要介紹了React反向代理及樣式獨立詳解，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的朋友可以參考一下
一、反響代理
1.1 安裝
使用命令：npm install http-proxy-middleware --save
1.2 使用
將之前的Film.js組件改成如下：
import React from 'react'
import {Route, Redirect, Switch, NavLink} from 'react-router-dom'
import NowPlay from './film/NowPlay'
import Comingsoon from './film/Comingsoon'
export default function Film() {
return (
<div>
<h1>Film</h1>
<ul>
<li>
<NavLink to="/film/nowplay">正在熱映</NavLink>
</li>
<li>
<NavLink to="/film/comingsoon">即將上映</NavLink>
</li>
</ul>
<Switch>
<Route path="/film/nowplay" component={NowPlay}></Route>
<Route path="/film/comingsoon" component={Comingsoon}></Route>
<Redirect from="/film" to="/film/nowplay"></Redirect>
</Switch>
</div>
)
}
在src文件夾下新建一個setupProxy.js注意名稱一定是這個。
寫入如下代碼：
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/gateway',
createProxyMiddleware({
target: 'https://m.maizuo.com',
changeOrigin: true,
})
);
};在Comingsoon.js組件中寫入如下代碼：
import axios from 'axios'
import React, { Component } from 'react'
export default class Comingsoon extends Component {
componentDidMount() {
axios.get("/gateway?cityId=110100&pageNum=1&pageSize=10&type=2&k=3607029").then((res) => {
console.log(res)
}, (err) => {
console.log(err)
})
}
render() {
return (
<div>Comingsoon</div>
)
}
}這樣我們在開發(fā)時的代理就配置好了。
二、cssModule
在之前創(chuàng)建了這么多css文件：
我們將其重命名，中間加個固定的單詞module(僅以middlecp.module.css為例)：
接著修改引入：
效果：
到此這篇關于React反向代理及樣式獨立詳解的文章就介紹到這了,更多相關React反向代理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了詳解使用React進行組件庫開發(fā)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了React中的Hooks路由跳轉問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了React配置Redux并結合本地存儲設置token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了React常見跨窗口通信方式實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
props是組件（包括函數組件和class組件）間的內置屬性，用其可以傳遞數據給子節(jié)點，props用來傳遞參數。組件實例化過程中，你可以向其中傳遞一個參數，這個參數會在實例化過程中被引用2022-09-09
在fiber出現之前，react的架構體系只有協(xié)調器reconciler和渲染器render。當前有新的update時，react會遞歸所有的vdom節(jié)點，如果dom節(jié)點過多，會導致其他事件影響滯后，造成卡頓。即之前的react版本無法中斷工作過程，一旦遞歸開始無法停留下來2023-02-02
這篇文章主要給大家介紹了基于React實現表單數據的添加和刪除的方法，文中給出了詳細的示例供大家參考，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要為大家詳細介紹了React中的Props類型校驗和默認值，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
全棧輕量級搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05