10.配置react-router-v6

最新推荐文章于 2024-04-12 19:27:57 发布

山川pro

最新推荐文章于 2024-04-12 19:27:57 发布

阅读量275

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/RRRRRDong/article/details/125287737

版权

react 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

安装react-router、react-router-dom

npm install react-router@6.3.0 react-router-dom@6.3.0 --save

新建路由表文件

import { lazy } from 'react';
import lazyLoad from './lazyLoad';

const Home = lazy(() => import(`@src/pages/home`));
const Login = lazy(() => import(`@src/pages/login`));
const rootRouter = [
  {
    path: '/',
    name: '首页',
    redirect: '/basis',
    key: '/',
    // element: <Layout />,
    children: [
      {
        index: true,
        name: '首页',
        key: '/',
        element: lazyLoad(Home),
      },
      {
        index: false,
        path: 'login',
        name: 'Demo',
        key: '/login',
        element: lazyLoad(Login),
      },
    ],
  },
];
export default rootRouter;

lazyLoad文件

import React from 'react';
import Loading from '@components/Loading';

export default function lazyLoad(Comp) {
  return (
    <React.Suspense fallback={<Loading />}>
      <Comp />
    </React.Suspense>
  );
}

在app.js中引入

import React from 'react';
import { HashRouter as Router, useRoutes } from 'react-router-dom';
import rootRouter from '@src/router/index';

const AppRoutes = () => useRoutes(rootRouter);

function App() {
  return (
    <Router>
      <AppRoutes />
    </Router>
  );
}

export default App;