React Router

【React】使用 Nginx 部署 React + Router 项目 项目编译 & 打包 npm run build 编译好的静态文件会在 build 目录下。 React 项目 Nginx 配置 server { server_name web.vksir.zone; location / { root /var/www/ns-web; index index.html; } } React + Router 项目 Nginx 配置 如果使用了 react-router，则 Nginx 配置会多出一项： server { server_name web.vksir.zone; location / { root /var/www/ns-web; index index.html; try_files $uri /index.html; } } 配置代理 如果开发时使用了 http-proxy-middleware，打包成静态文件后，这个包将会失去作用，需要使用 Nginx 代替其提供代理功能。 如果 src/setupProxy.js 文件内容如下： const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use('/ns_server', createProxyMiddleware({ target: 'http://server.vksir.zone', changeOrigin: true, pathRewrite: { '^/ns_server': '' } })); }; 那么 Nginx 配置应当如下： ...

初始化 create-react-app npx create-react-app my-app 安装 MUI 在工程路径下执行： 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 可看到简单页面： 跨域请求 配置跨域 npm install http-proxy-middleware 创建文件 src/setupProxy.js 如下： ...