React项目全球新闻发布管理系统 - 新版问题解决方式整理及部署网站至 Netlify

整理了一下新版的变化以及遇到的坑的解决办法，最后也会分享将网站及接口部署的方式。

千锋前端-React全家桶_React项目全球新闻发布管理系统
https://www.bilibili.com/video/BV1fw411d7R5

文章目录

• • P4
  • P5
  • P6
  • P11
  • P15
  • P17
  • P18
  • P22
  • P29
  • P30
  • P34
  • P38
  • P41
  • P43
  • P45
  • P50
  • P67
  • 进阶: 多语系网站
  • 接口数据
  • 部署网站及接口

P4

反向代理 setupProxy.js 改为：

// setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://i.maoyan.com',
      changeOrigin: true,
    })
  );
};

App.js 中 axios 请求地址改为：

// App.js
useEffect(() => {
    axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E7%B9%81%E6%98%8C%E5%8C%BA&ci=774&channelId=4")
      .then((res) => console.log(res.data));
  }, []);

因为我没有看到视频中用的 m.maoyan.com/ajax 那个地址，所以我自己抓了一个，反正是练习用的就不必那么讲究了，测试一下 middleware 能不能使就行。

P5

15 分处

• HashRouter 里面包 Switch 会出错，请改为包 Routes (Routes 和 Switch 的功用是一样的，都能做到精准匹配)

• Route 的 component 属性改为 element，并且 element 中请使用 <> 包裹组件名称

  // IndexRouter.js
  import React from “react”;
  import { HashRouter, Routes, Route } from “react-router-dom”;
  import Login from “…/views/login/Login”;
  import NewsSandBox from “…/views/newssandbox/NewsSandBox”;

  export default function IndexRouter () {
  return (
  
  
  <Route path="/login" element={} />
  <Route path="/" element={} />
  
  
  );
  };

20 分处重定向部分

For react-router-dom v6, simply replace Redirect with Navigate

所以我们需要将 Redirect 改为 Navigate，并且一样使用的是 element 而不是 render

<Route path="/*" element={localStorage.getItem("token") ?  <NewsSandBox/> : <Navigate to="/login"/>} />

P6

14 分处，一样将所有 Switch 改为 Routes, component 改为 element，Redirect 改为 Navigate：

//NewsSandBox.js
<Routes>
  <Route path="home" element={<Home />} />
  <Route path="user-manage/list" element={<UserList />} />
  <Route path="right-manage/role/list" element={<RoleList />} />
  <Route path="right-manage/right/list" element={<RightList />} />
  <Route path="/" element={<Navigate replace from="/" to="home"/>} />
  <Route path="/*" element={<NoPermission/>} />
</Routes>

并且要记住的是 Navigate 只能包裹在 Route 中，Routes 中只能有 Route 或者 Fragment。

P11

使用 withRouter 会报错：

‘withRouter’ is not exported from ‘react-router-dom’.

因为 V6 之后没有 withRouter 了，所以直接改用 useNavigate 会更方便，完整的 Code 我直接放出来吧：

import React from "react";
import { Layout, Menu } from "antd";
import { UserOutlined, HomeOutlined, CrownOutlined } from "@ant-design/icons";
import SubMenu from "antd/lib/menu/SubMenu";
import { useNavigate } from "react-router";

const { Sider } = Layout;

const menuList = [
  {
    key: "/home",
    title: "首页",
    icon: <HomeOutlined />,
  },
  {
    key: "/user-manage",
    title: "用户管理",
    icon: <UserOutlined />,
    children: [
      {
        key: "/user-manage/list",
        title: "用户列表",
        icon: <UserOutlined />,
      },
    ],
  },
  {
    key: "/right-manage",
    title: "权限管理",
    icon: <CrownOutlined />,
    children: [
      {
        key: "/right-manage/role/list",
        title: "角色列表",
        icon: <CrownOutlined />,
      },
      {
        key: "/right-manage/right/list",
        title: "权限列表",
        icon: <CrownOutlined />,
      },
    ],
  },
];

export default function SideMenu({ collapsed }) {
  let navigate = useNavigate();
  // Menu
  const renderMenu = (menuList) => {
    return menuList.map((item) => {
      if (item.children) {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {renderMenu(item.children)}
          </SubMenu>
        );
      }
      return (
        <Menu.Item
          key={item.key}
          icon={item.icon}
          onClick={() => navigate(item.key)}
        >
          {item.title}
        </Menu.Item>
      );
    });
  };

  return (
    <Sider trigger={null} collapsible collapsed={collapsed}>
      <div className="logo" />
      <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
        {renderMenu(menuList)}
      </Menu>
    </Sider>
  );
}

P15

props.location.pathname 可以用 useLocation 钩子取代，与 props.location 是一样的用法：

import { useNavigate, useLocation } from "react-router";
// ...
let location = useLocation();
const selectKeys = [location.pathname]; // ex: ['/home']
const openKeys = ["/" + location.pathname.split("/")[1]];
// ...
<Menu theme="dark" mode="inline" selectedKeys={selectKeys} defaultOpenKeys={openKeys}>
  {renderMenu(menu)}
</Menu>

P17

直接写 res.data[0].children = "" 的话一旦 array 内容顺序有所变更就会错误࿰