Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a

这个错误提示是我在配配react的SSR中为了支持路由而报的错误提示。这个错误提示有点奇怪，不是完全的Error提示，而是Warning。

所以在debug的时候一直没想是版本的原因。

直到我看到了一行字：

WARNING in ./node_modules/react-router-config/esm/react-router-config.js 41:38-44
export 'Switch' (imported as 'Switch') was not found in 'react-router' (possible exports: AbortedDeferredError, Await, MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, RouterProvider, Routes, UNSAFE_DataRouterContext, UNSAFE_DataRouterStateContext, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, UNSAFE_enhanceManualRouteObjects, createMemoryRouter, createPath, createRoutesFromChildren, createRoutesFromElements, defer, generatePath, isRouteErrorResponse, json, matchPath, matchRoutes, parsePath, redirect, renderMatches, resolvePath, unstable_useBlocker, useActionData, useAsyncError, useAsyncValue, useHref, useInRouterContext, useLoaderData, useLocation, useMatch, useMatches, useNavigate, useNavigation, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRevalidator, useRouteError, useRouteLoaderData, useRoutes)

万万没想到，搞了我懵逼一天的竟然是一个版本问题。

"react-router-config": "^5.1.1",

这个东西在react-router v6中被废弃了。

而升级指南中恰恰就有提到这个升级迁移的注意事项：

Use useRoutes instead of react-router-config

意思是说：v5版本的 react-router-config 包中的所有方法都已经被迁移到了react-router 版本的core核心代码中. 如果你偏向于或者需要把路由定义成JavaScript对象而不是react组件的话，那么你会爱上这种方式，也就是使用useRoutes 方法。

function App() {
  let element = useRoutes([
    // These are the same as the props you provide to <Route>
    { path: "/", element: <Home /> },
    { path: "dashboard", element: <Dashboard /> },
    {
      path: "invoices",
      element: <Invoices />,
      // Nested routes use a children property, which is also
      // the same as <Route>
      children: [
        { path: ":id", element: <Invoice /> },
        { path: "sent", element: <SentInvoices /> },
      ],
    },
    // Not found routes work as you'd expect
    { path: "*", element: <NotFound /> },
  ]);

  // The returned element will render the entire element
  // hierarchy with all the appropriate context it needs
  return element;
}

Routes defined in this way follow all of the same semantics as <Routes>. In fact, <Routes> is really just a wrapper around useRoutes.

We encourage you to give both <Routes> and useRoutes a shot and decide for yourself which one you prefer to use. Honestly, we like and use them both.

If you had cooked up some of your own logic around data fetching and rendering server-side, we have a low-level matchRoutes function available as well similar to the one we had in react-router-config.

此外也是最关键的一环,就是：

import { StaticRouter } from "react-router-dom";

StaticRouter 在v6版本中，已经换用react-router-dom/server 来引入了：

import { StaticRouter } from "react-router-dom/server";

参考链接

再一个就是react-router的路由配置有变化，由component 变成了 element。

import React from 'react'
import Home from '../share/pages/Home'
import List from '../share/pages/List'
import NotFound from './pages/NotFound'

export default [
  {
    path: '/',
    element: <Home />,
    exact: true
  },
  {
    path: '/list',
    element: <List />
  },
  { path: '*', element: <NotFound /> }
]