React反向代理及樣式獨(dú)立詳解
更新時(shí)間：2022年08月04日 09:59:19 作者：你華還是你華
這篇文章主要介紹了React反向代理及樣式獨(dú)立詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
一、反響代理
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文件夾下新建一個(gè)setupProxy.js注意名稱一定是這個(gè)。
寫入如下代碼：
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>
)
}
}這樣我們?cè)陂_發(fā)時(shí)的代理就配置好了。
二、cssModule
在之前創(chuàng)建了這么多css文件：
我們將其重命名，中間加個(gè)固定的單詞module(僅以middlecp.module.css為例)：
接著修改引入：
效果：
到此這篇關(guān)于React反向代理及樣式獨(dú)立詳解的文章就介紹到這了,更多相關(guān)React反向代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了詳解使用React進(jìn)行組件庫(kù)開發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了React中的Hooks路由跳轉(zhuǎn)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲(chǔ)設(shè)置token方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React?Suspense解決競(jìng)態(tài)條件詳解
這篇文章主要為大家介紹了React?Suspense解決競(jìng)態(tài)條件詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了React常見跨窗口通信方式實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn)，props用來傳遞參數(shù)。組件實(shí)例化過程中，你可以向其中傳遞一個(gè)參數(shù)，這個(gè)參數(shù)會(huì)在實(shí)例化過程中被引用2022-09-09
在fiber出現(xiàn)之前，react的架構(gòu)體系只有協(xié)調(diào)器reconciler和渲染器render。當(dāng)前有新的update時(shí)，react會(huì)遞歸所有的vdom節(jié)點(diǎn)，如果dom節(jié)點(diǎn)過多，會(huì)導(dǎo)致其他事件影響滯后，造成卡頓。即之前的react版本無(wú)法中斷工作過程，一旦遞歸開始無(wú)法停留下來2023-02-02
基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除詳解
這篇文章主要給大家介紹了基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除的方法，文中給出了詳細(xì)的示例供大家參考，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
React中的Props類型校驗(yàn)和默認(rèn)值詳解
這篇文章主要為大家詳細(xì)介紹了React中的Props類型校驗(yàn)和默認(rèn)值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
全棧輕量級(jí)搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級(jí)搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05