React项目路由模块(0) 配置路由 懒加载

Step 1. install react-router-dom

npm i react-router-dom

Step 2.创建路由实例

Router-router.tsx

import { lazy } from 'react';
import { createHashRouter } from 'react-router-dom';
//使用lazy将页面变成懒加载模式
const App = lazy(() => import('../Pages/App'));
const Index = lazy(() => import('../Pages/Index'));
const Article = lazy(() => import('../Pages/article'));
const Share = lazy(() => import('../Pages/share'));
const About = lazy(() => import('../Pages/About'));
const router = [
  {
    path: '/',
    element: <App />,
    children: [
      { index: true, element: <Index /> },
      { path: 'article', element: <Article /> },
      { path: 'share', element: <Share /> },
      { path: 'About', element: <About /> }
    ]
  }
];

export default createHashRouter(router);

//Hash路由   http:locahost:3000/#/

Step 3.入口文件使用实例

main.tsx


import ReactDOM from 'react-dom/client';
// lazy通常和Suspense使用
import { Suspense } from 'react';
import { RouterProvider } from 'react-router-dom';
//导入写好的router
import router from './router/router.js';
ReactDOM.createRoot(document.getElementById('root')!).render(
  <Suspense>
    <RouterProvider router={router}></RouterProvider>
  </Suspense>
);