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
為例):
接著修改引入:
效果:
到此這篇關(guān)于React反向代理及樣式獨立詳解的文章就介紹到這了,更多相關(guān)React反向代理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React+Node實現(xiàn)大文件分片上傳、斷點續(xù)傳秒傳思路
本文主要介紹了React+Node實現(xiàn)大文件分片上傳、斷點續(xù)傳秒傳思路,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02解決React報錯Expected?`onClick`?listener?to?be?a?function
這篇文章主要為大家介紹了React報錯Expected?`onClick`?listener?to?be?a?function解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12React-hook-form-mui基本使用教程(入門篇)
react-hook-form-mui可以幫助開發(fā)人員更輕松地構(gòu)建表單,它結(jié)合了React?Hook?Form和Material-UI組件庫,使用react-hook-form-mui,開發(fā)人員可以更快速地構(gòu)建表單,并且可以輕松地進行表單驗證和數(shù)據(jù)處理,本文介紹React-hook-form-mui基本使用,感興趣的朋友一起看看吧2024-02-02React使用Canvas繪制大數(shù)據(jù)表格的實例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個很不錯的Canvas繪圖框架Leafer,api很友好就試著寫了一下,文中有詳細的代碼示例供大家參考,感興趣的小伙伴可以自己動手試試2023-09-09React videojs 實現(xiàn)自定義組件(視頻畫質(zhì)/清晰度切換) 的操作代碼
最近使用videojs作為視頻處理第三方庫,用來對接m3u8視頻類型,這里總結(jié)一下自定義組件遇到的問題及實現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-08-08react+zarm實現(xiàn)底部導(dǎo)航欄的示例代碼
本文主要介紹了react?+?zarm?實現(xiàn)底部導(dǎo)航欄的示例代碼,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-05-05