@trionesdev/dubhe-react

Install

$ yarn install

$ npm run dev
$ npm run build

使用

子应用

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

Dubhe.render({
    root,
    render: () => <ConfigProvider locale={zhCN}>
        <RouterProvider router={router}/>
    </ConfigProvider>,
    beforeRender: (props) => {
        setBossUserToken(props?.DubheToken)
    }
})

route

在微前端模式下，子应用和主应用之间的跳转，子应用跳转子应用的场景

RouterProvider 数据路由

<DubheRouterProvider name={`DubheBoss`} router={router}>
    <RouterProvider router={router}/>
</DubheRouterProvider>

或

<DubheRouterProvider name={`DubheBoss`} router={router} provider={true} />

Router普通路由

<HashRouter>
    <DubheRouter name={`DubheBoss`}>
        <AppRouters/>
    </DubheRouter>
</HashRouter>

DubheLink

跳转到 DubhePhecda 应用的 /device-management/products 路由，并且应用内是hash路由

<DubheLink to={`/device-management/products`} app={`DubhePhecda`} appHashRouter={true}>测试</DubheLink>

useDubheNavigate

跳转到 DubhePhecda 应用的 /device-management/products 路由，并且应用内是hash路由

const dubheNavigate = useDubheNavigate()
dubheNavigate(`/device-management/products`, {app: 'DubhePhecda', appHashRouter: true})