qiankun微应用实现ReactV6、ReactV6.44路由配置

基于路由配置

适用于 route-based 场景。

通过将微应用关联到一些 url 规则的方式，实现当浏览器 url 发生变化时，自动加载相应的微应用的功能。

1分钟手把手了解微前端路由配置开发到部署保姆式教程

 废话不多说先了解下在实践。

1. 什么是微前端web应用构建方式

微前端
 微前端在2016年ThoughtWorks Technology Radar正式被提出。微服务这个被广泛应用于服务端的技术范式扩展到前端领域。现代的前端应用的发展趋势正在变得越来越富功能化，富交互化，也就是SPA应用；这样越来越复杂的单体前端应用，背后的后端应用则是数量庞大的微服务集群。 

 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

2.使用微前端的场景

随着需求的不断跨大，可能前端的服务也在不断增加，但是随着业务的增加，需要将整个系统重新发布，造成的是资源的浪费，如果能够每次只需要发布新的子系统，不需要发布整个系统就好了；
而现有的技术中，我们可以通过Iframe引入所谓的子系统，但是该方式存在无可忽视的缺陷，下面会提到，所以随着技术的发展，出现了微前端的概念与实现
 

3.微前端实现技术两种常用技术手段

1.Iframe   2.qinakun js库

4.上手V6版本路由配置

function render(props) {
  console.log('拿到主应用参数', props);
  const { container } = props;
  ReactDOM.render( // 判断是否要独立项目独立为/开头
    <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/app-react' : '/'}>
      <Routes>
        {/* 路径跟主应用一致才能访问到 */}
        <Route path='/app-react' element={<App nickName={props} />} />
        {/* 自己起的应用单独放/也是访问主页面 */}
        <Route path='/' element={<App nickName={props} />} />
        <Route path='/app-react/invoices' element={<HomeBoat />} />
      </Routes>
    </BrowserRouter>,
    container ? container.querySelector('#root') : document.querySelector('#root')
  )
}

 

5.上手V6.44最新版本路由配置

const router = createBrowserRouter([
    {
        path: "/app-react",
        element: <App />,
    },
    {
        path: "/app-react/invoices",
        element: <HomeBoat />,
    },
]);
function render(props) {
    const { container } = props;
    const renderBox = container ? container.querySelector('#root') : document.querySelector('#root')
    ReactDOM.createRoot(renderBox).render(
        <React.StrictMode>
            <RouterProvider router={router} />
        </React.StrictMode>
    );
}
render()