Vue转React之--React动态配置路由，动态匹配组件

这是一篇没有干货的笔记，主要以两个例子去记录用React后的感受。

vue转react,思维方式需要转变，因为我一直在Vue模式下开发，感觉vue告诉我怎么去写就能实现什么样的效果，所以转React后会认为React应该也会有类似的封装。

比如，动态渲染组件，我一直查找类似vue中的<component is=""/>的用法，但一直没有找到，于是跑去问负责人，他说了一句话点醒了我“js怎么写，react就怎么写！！！”。react不像vue为我们封装了很多，只是复杂的部分为我们实现提供了各种便利的方法，也提供了一种新的开发方式。

附下packge.json说明代码运行环境

1.React动态配置路由：

在src/router/routes.tsx中将路由嵌套结构编辑好，并以element属性保存路由对应的组件。在main.txs中引入routes遍历渲染为<Route/>。

src/router/routes.tsx

import App from "../App";
import FormPage from "../pages/form/formPage";
import Login from "../pages/login/Login";
import TablePage from "../pages/table/TablePage";
import UserIndex from "../pages/user/Index";

export const componentsRoutes = [
  {
    path: "/",
    title: "首页",
    element: <App key="app" />,
    children: [
      {
        path: "/tablePage",
        title: "table组件",
        element: <TablePage />,
      },
      {
        path: "/formPage",
        title: "form组件",
        element: <FormPage />,
      },
      {
        path: "/userIndex",
        title: "用户管理",
        element: <UserIndex />,
      },
    ],
  },
];

const routes = [
  {
    path: "/login",
    element: <Login />,
  },
  ...componentsRoutes,
];

export default routes;

src/main.tsx

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Provider } from "react-redux";
import ReactDOM from "react-dom";
import "./index.css";
import "antd/dist/antd.css";
import store from "./store/Index";
import routes from "./router/routes";

interface RouteItem {
  children?: { path: string }[];
  path: string;
}

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <Routes>
        {routes.map((item: RouteItem) => {
          return (
            <Route key={item.path} {...item}>
              {item.children
                ? item.children.map((cItem: RouteItem) => (
                    <Route key={`${item.path}${cItem.path}`} {...cItem} />
                  ))
                : null}
            </Route>
          );
        })}
      </Routes>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

2.React实现动态匹配组件

React实现动态匹配组件，即js去判断应显示哪个组件。我们也可以像vue那样，去封装一个组件，这个组件里面去做些校验判断，那么可能就接近于vue思想中的<component is=""/>。因为太简单了，以下只贴下图：

（老实说当时我的想法有点魔怔了，一直查各种技术网站，一直认为switch case方式是不是有点不够通用？直到请教了负责人才放心下来）

总结：

最近一直在学习React，负责人也一直跟我说，当你真正入手react，你会发现他真香。我暂时可能还没有领悟到，但我相信大多数人的思考肯定有自己的道理。

目前我感受最大的，就是那些大神们经常提到的心智负担，React真的给我很少的限制，就是js的思想，没有给我很多的条条框框来约束我怎么实现就可以，而是让我以正常的开发思维去写就可以。这一点和Vue不同，我带着Vue的思考方式去理解React,导致我总在寻找更好的编码方式，一直以为React帮我设定好了，我依照他给的套路去写，但实际上是没有的。