【React】React + Router + MUI 工程搭建

初始化

create-react-app

1	npx create-react-app my-app

安装 MUI

在工程路径下执行：

1
2
3

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/material @mui/styled-engine-sc styled-components
npm install @mui/icons-material

在 public/index.html 中引入：

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

引入一个按钮。修改 src/App.js 如下：

import './App.css';
import {Button} from "@mui/material";

function App() {
    return (
        <>
            <Button variant="contained">你好，世界</Button>
        </>
    );
}

export default App;

修改 src/App.css 如下：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

启动

npm start

如此打开 http://localhost:3000 可看到简单页面：

跨域请求

配置跨域

1	npm install http-proxy-middleware

创建文件 src/setupProxy.js 如下：

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
    app.use(
        createProxyMiddleware("/neutron_star_api", {
            target: "https://api.vksir.zone",
            changeOrigin: true,
            pathRewrite: {
                "^/neutron_star_api": ""
            }
        })
    )
}

配置 axios 实例

1	npm install axios

创建文件 src/common/requests.js 如下：

import axios from "axios";

const neutronStarAPI = axios.create({});

const baseRequest = [
    (config) => {
        config.baseURL = '/neutron_star_api/';
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
]

const baseResponse = [
    (response) => {
        return response;
    },
    (error) => {
        return Promise.reject(error);
    }
]

neutronStarAPI.interceptors.request.use(...baseRequest);
neutronStarAPI.interceptors.response.use(...baseResponse);

export {neutronStarAPI};

请求

新增一个组件 Ipv4，并增加请求函数。修改 src/App.js 如下：

import './App.css';
import {Button, TextField} from "@mui/material";
import {useState} from "react";
import {neutronStarAPI} from "./common/requests";

function App() {
    return (
        <>
            <Ipv4/>
        </>
    );
}

export default App;

function Ipv4() {
    const [ip, setIp] = useState('');

    function calc() {
        const params = new URLSearchParams();
        params.append('ip_addr', ip);
        neutronStarAPI({
            url: '/calculator/ipv4',
            params: params,
            method: 'get',
        }).then((resp) => {
            console.log(resp.data);
        });
    }

    return (
        <>
            <div>
                <TextField
                    label="IPAddress"
                    variant="outlined"
                    value={ip}
                    placeholder="192.168.10.1/24"
                    onChange={(e) => setIp(e.target.value)}/>
                <br/><br/>
                <Button variant="contained" onClick={calc}>Parse</Button>
            </div>
        </>
    );
}

效果如下：

路由

1	npm install react-router-dom@6

再新增一个组件 Ipv6，编辑路由路径配置。修改 src/App.js 如下：

import './App.css';
import {Button, TextField} from "@mui/material";
import {useState} from "react";
import {neutronStarAPI} from "./common/requests";
import {BrowserRouter, Routes, Route, Navigate, Link} from "react-router-dom";

function App() {
    return (
        <>
            <BrowserRouter>
                <Link to="/calculator/ipv4">IPv4</Link>
                <span> | </span>
                <Link to="/calculator/ipv6">IPv6</Link>
                <br/><br/>
                <Routes>
                    <Route path="/" element={<Navigate to="/calculator" replace />}/>
                    <Route path="/calculator" element={<Navigate to="/calculator/ipv4" replace />}/>
                    <Route path="/calculator/ipv4" element={<Ipv4/>}/>
                    <Route path="/calculator/ipv6" element={<Ipv6/>}/>
                </Routes>
            </BrowserRouter>
        </>
    );
}

export default App;

function Ipv4() {
    const [ip, setIp] = useState('');

    function calc() {
        const params = new URLSearchParams();
        params.append('ip_addr', ip);
        neutronStarAPI({
            url: '/calculator/ipv4',
            params: params,
            method: 'get',
        }).then((resp) => {
            console.log(resp.data);
        });
    }

    return (
        <>
            <div>
                <TextField
                    label="IPv4 Address"
                    variant="outlined"
                    value={ip}
                    placeholder="192.168.10.1/24"
                    onChange={(e) => setIp(e.target.value)}/>
                <br/><br/>
                <Button variant="contained" onClick={calc}>Parse</Button>
            </div>
        </>
    );
}

function Ipv6() {
    const [ip, setIp] = useState('');

    function calc() {
        const params = new URLSearchParams();
        params.append('ip_addr', ip);
        neutronStarAPI({
            url: '/calculator/ipv6',
            params: params,
            method: 'get',
        }).then((resp) => {
            console.log(resp.data);
        });
    }

    return (
        <>
            <div>
                <TextField
                    label="IPv6 Address"
                    variant="outlined"
                    value={ip}
                    placeholder="1021::/64"
                    onChange={(e) => setIp(e.target.value)}/>
                <br/><br/>
                <Button variant="contained" onClick={calc}>Parse</Button>
            </div>
        </>
    );
}

效果如下：

参考文档：