react-client-router v1.0.8

1、基础使用

import React from 'react';
import { Routes, Route, OutLet} from 'react-client-router';
const isHash = true;

const Home = () => {
  return (
      <div>home <OutLet/></div>
  )
}

const Example = () => {
  return (
        <Routes hashMode={isHash}>
         <Route path="/" element={isHash ? <div>22332</div> :<Home />} />
         <Route path="/home" element={isHash ? "<div>22332</div>" :<Home />} />
          <Route path="/index" element={!isHash ? "<div>22332</div>" :<Home />}>
            <Route path={'/index/hello'} element={<div>index-page</div>} />
          </Route>
        </Routes>
  )
};
export default Example;

2、懒加载（1）

// index
import React, {lazy} from 'react';
import {Routes, Route,} from 'react-client-router';
import { Spin } from "antd";

const isHash = true;
const Home = React.lazy(() => import("./Home"));
const Main = React.lazy(() => import("./Main"));
const HomeContent = React.lazy(() => import("./HomeContent"));

const Example = () => {
  return (
      <Routes
          hashMode={isHash}
          notFound={lazy(() => import("@pages/notFound"))}
          fallback={
            <Spin
                tip="Loading"
                size="large"
                wrapperClassName={"w-h-100 relative"}
                className="w-h-100 absolute"
            >
              <div/>
            </Spin>
          }>
        <Route path="/" lazy={Home}>
          <Route path="/home/content" lazy={HomeContent} />
        </Route>
        <Route path="/main" lazy={Main} />
      </Routes>
  )
};

export default Example;


// home
import React from "react";
import {Link, OutLet} from 'react-client-router';
const Home = () => {
  return (
      <div>
        <h1>home-page</h1>
        <Link to={'/main'}>main-page</Link><br/>
        <Link to={'/home/content'}>home/content</Link><br/>
        <Link to={'/home/null'}>home/null</Link>
        <OutLet/>
      </div>
  )
}

export default Home;

// home/content

import React from "react";
import {Link} from 'react-client-router';
const HomeContent = () => {
  return (
      <div>homeContent
        <br/>
        <Link to={'/main'}>main</Link>
      </div>
  )
};

export default HomeContent;

// main

import React from "react";
import {Link} from "react-client-router";

const Main = () => {
  return (
      <div>
        <h1>main-page</h1>
        <Link to={'/home/content'}>home-page</Link>
      </div>
  )
}

export default Main;

2、懒加载（2）

import React, { lazy } from "react";
import { RoutesContainer, OutLet } from "react-client-router";
import { Spin } from "antd";
import {
  SettingOutlined,
  HomeFilled,
  DesktopOutlined,
} from "@ant-design/icons";
// import { lazyRouter } from "./utils";
// import Layout from '@pages';
export const menu = [
  {
    label: "首页",
    key: "/",
    icon: <HomeFilled />,
    path: "/",
    lazy: lazy(() => import("@pages/home")),
  },
  {
    label: "系统设置",
    key: "/setting",
    icon: <SettingOutlined />,
    path: "/setting",
    lazy: lazy(() => import("@pages/setting")),
  },
  {
    label: "前端",
    key: "/client",
    path: "/client",
    icon: <DesktopOutlined />,
    element: <OutLet />,
    children: [
      {
        label: "PDF应用",
        key: "/client/index",
        path: "/client",
        icon: <DesktopOutlined />,
        element: lazy(() => import("@pages/client/app/pdf")),
      },
    ],
  },
];
const router = [
  {
    path: "/",
    lazy: lazy(() => import("@pages")),
    children: [
      ...menu,
      {
        label: "404",
        key: "404",
        path: "/404",
        lazy: lazy(() => import("@pages/notFound")),
      },
    ],
  },
  {
    label: "登录",
    path: "/login",
    lazy: lazy(() => import("@pages/login")),
  },
];

export default () => {
  return (
    <RoutesContainer
      router={router}
      notFound={lazy(() => import("@pages/notFound"))}
      fallback={
        <Spin
          tip="Loading"
          size="large"
          wrapperClassName={"w-h-100 relative"}
          className="w-h-100 absolute"
        >
          <div/>
        </Spin>
      }
    />
  );
};