使用react-router-dom的一些坑坑

在使用路由跳转this.props.hostry.push("/xxx")的时候出现了不跳转页面的问题,在自己封装的router-comfig中没有看到相关的错误日志信息，经过几番搜索页面找到原因，于是就用了一个开源库react-router-config这个库，就出现了一下错误提示：

        
       Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Route`.
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:34763:5)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:35298:5)
    at Suspense
    at div
    at ViewRouter
    at div
    at App
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:34947:5)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:33579:5)

上面的原因 因为配置静态路由，需要考虑顺序问题

const routes = [
  {
    path: "/index",
    component: lazy(() => import("../pages/index")),
    exact: true,
    meta: {
      title: "首页",
    },
  },
  {
    path: "/carApply",
    component: lazy(() => import("../pages/page2")),
    meta: {
      title: "page2",
    },
    exact: true,
  },

  {
    path: "/paramsSetting",
    component: lazy(() => import("../pages/page1")),
    meta: {
      title: "page1",
    },
    exact: true,
  },
  {
    path: "/test",
    component: lazy(() => import("../pages/Test")),
    meta: {
      title: "测试页面",
    },
    exact: true,
    // 若有子页面，此为参考
    children: [
      {
        path: "/test/demo",
        component: lazy(() => import("../pages/Test/Demo")),
      },
      {
        path: "/test/demo2",
        component: lazy(() => import("../pages/Test/Demo2")),
      },
    ],
  },
  {
    path: null,
    redirect: lazy(() => import("../pages/NotFound")),
    meta: {
      title: "404",
    },
    exact: true,
  },
];

export default routes;