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ā)
本篇文章主要介紹了詳解使用React進(jìn)行組件庫(kù)開發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-02-02
React中的Hooks路由跳轉(zhuǎn)問題
這篇文章主要介紹了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í)例詳解
這篇文章主要為大家介紹了React常見跨窗口通信方式實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
React中props使用教程
props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn)，props用來(lái)傳遞參數(shù)。組件實(shí)例化過程中，你可以向其中傳遞一個(gè)參數(shù)，這個(gè)參數(shù)會(huì)在實(shí)例化過程中被引用
2022-09-09
React超詳細(xì)講述Fiber的使用
在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ú)法停留下來(lái)
2023-02-02
基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除詳解
這篇文章主要給大家介紹了基于React實(shí)現(xiàn)表單數(shù)據(jù)的添加和刪除的方法，文中給出了詳細(xì)的示例供大家參考，相信對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-03-03
React中的Props類型校驗(yàn)和默認(rèn)值詳解
這篇文章主要為大家詳細(xì)介紹了React中的Props類型校驗(yàn)和默認(rèn)值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-03-03
全棧輕量級(jí)搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級(jí)搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05