react-client-router
v1.0.8
Published
基于react的客户端渲染路由
Downloads
28
Readme
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>
}
/>
);
};