chore(deps): update dependency react-router-dom to ^6.14

Author: jaywcjlove

package.json

@@ -34,7 +34,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "~7.2.6",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.14.0",
     "rehype-rewrite": "^3.0.6",
     "rehype-video": "^1.2.2",
     "uiw": "~4.21.19"

src/components/Search.tsx

@@ -19,21 +19,21 @@ export default function Search() {
       to: '/pkg/uiw',
       label: 'uiw',
     },
-    {
-      to: '/pkg/vue',
-      label: 'vue',
-    },
     {
       to: '/pkg/react',
       label: 'react',
     },
     {
-      to: '/pkg/react@17',
-      label: 'react@17',
+      to: '/pkg/vue',
+      label: 'vue',
+    },
+    {
+      to: '/pkg/react@18',
+      label: 'react@18',
     },
     {
-      to: '/pkg/react@17.0.1',
-      label: 'react@17.0.1',
+      to: '/pkg/react@18.2.0',
+      label: 'react@18.2.0',
     },
   ]);
   const name = pkg && pkg.name ? `${pkg.name}@${pkg.version}` : pkgname;

src/index.tsx

@@ -1,49 +1,25 @@
-import { Suspense } from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import Loader from '@uiw/react-loader';
-import { HashRouter, Route, Routes } from 'react-router-dom';
 import GitHubCorners from '@uiw/react-github-corners';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
 import '@uiw/reset.css';
 import { store } from './models';
 import './index.css';
 import { routes } from './routers';
 
-const Loading = (
+const Loading = () => (
   <div style={{ padding: 30 }}>
     <Loader tip="loading..." />
   </div>
 );
 
-function App() {
-  return (
-    <HashRouter>
-      <Routes>
-        {routes.map(({ element: Child, path }, idx) => {
-          const Com = Child as any;
-          return (
-            <Route
-              key={idx}
-              path={path}
-              element={
-                <Suspense fallback={Loading}>
-                  <Com />
-                </Suspense>
-              }
-            />
-          );
-        })}
-      </Routes>
-    </HashRouter>
-  );
-}
-
 const container = document.getElementById('root');
 const root = createRoot(container!);
 
 root.render(
   <Provider store={store}>
     <GitHubCorners size={54} target="_parent" href="https://github.com/uiwjs/npm-unpkg" />
-    <App />
+    <RouterProvider router={createHashRouter(routes)} fallbackElement={<Loading />} />
   </Provider>
 );

src/pages/Home/index.tsx

@@ -1,11 +1,13 @@
 import Search from '../../components/Search';
 import styles from './index.module.less';
 
-export default function Home() {
+export function Component() {
   return (
     <div className={styles.content}>
-      <h1>npm unpkg</h1>
+      <h1>NPM UNPKG</h1>
       <Search />
     </div>
   );
 }
+
+Component.displayName = 'HomePage';

src/pages/Preview/index.module.less

@@ -34,6 +34,10 @@
     background-color: var(--color-fg-subtle);
     margin-top: 2px;
   }
+  .unpkg {
+    text-decoration: none;
+    font-weight: 900;
+  }
 }
 
 :global(.w-layout) {

src/pages/Preview/index.tsx

@@ -19,7 +19,7 @@ import styles from './index.module.less';
 
 const { Header, Content } = Layout;
 
-export default function Preview() {
+export function Component() {
   const {
     showSearch,
     notFindPkg,
@@ -67,8 +67,8 @@ export default function Preview() {
 
   const unPkgView = useMemo(
     () => (
-      <a href={`https://unpkg.com/browse/${path.pkgName}/`} target="__blank">
-        unpkg
+      <a className={styles.unpkg} href={`https://unpkg.com/browse/${path.pkgName}/`} target="__blank">
+        UNPKG
       </a>
     ),
     [path.pkgName],
@@ -157,3 +157,5 @@ export default function Preview() {
     </Layout>
   );
 }
+
+Component.displayName = 'PreviewPage';

src/routers.ts

@@ -1,25 +1,24 @@
-import React, { lazy } from 'react';
 import { RouteObject } from 'react-router-dom';
 
 export const routes: RouteObject[] = [
   {
     path: '/',
-    element: lazy(() => import('./pages/Home')) as unknown as React.ReactNode,
+    lazy: () => import('./pages/Home'),
   },
   {
     path: '/pkg/:name',
-    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
+    lazy: () => import('./pages/Preview'),
   },
   {
     path: '/pkg/:name/file/:filename/*',
-    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
+    lazy: () => import('./pages/Preview'),
   },
   {
     path: '/pkg/:org/:name',
-    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
+    lazy: () => import('./pages/Preview'),
   },
   {
     path: '/pkg/:org/:name/file/:filename/*',
-    element: lazy(() => import('./pages/Preview')) as unknown as React.ReactNode,
+    lazy: () => import('./pages/Preview'),
   },
 ];