jfreact-router

Summary

This library is mainly to solve the problem of on-demand loading of react routing, lazy loading routing, caching routing, making home page loading more efficient, and it will be very convenient to use.

Install

npm i jfreact-router --save

How to use

1. Custom your router config file router/index.js:

import { creteJfRouter } from 'freact-router'

const data = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/home')
    // component: Home
  },
  {
    path: '/login/:id/:name',
    name: 'Login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login')
    // component: Login
  },
  {
    path: '/private-room/:id',
    name: 'PrivateRoom',
    component: () =>
      import(/* webpackChunkName: "private_room" */ '@/views/room/private-room')
  },
  {
    path: '/group-room/:id/:name',
    name: 'GroupRoom',
    component: () =>
      import(/* webpackChunkName: "group_room" */ '@/views/room/group-room')
  },
  {
    path: '/my',
    name: 'My',
    component: () => import(/* webpackChunkName: "my" */ '@/views/my'),
    children: [
      {
        path: '/personal',
        name: 'Personal',
        component: () =>
          import(/* webpackChunkName: "personal" */ '@/views/my/personal'),
        children: [
          {
            path: '/setting',
            name: 'Setting',
            component: () =>
              import(
                /* webpackChunkName: "setting" */ '@/views/my/personal/setting'
              )
          }
        ]
      }
    ]
  }
]

export default creteJfRouter(data)

2. Init router in index.js file：

import { initJfRouter } from 'jfreact-router'
initJfRouter() // 初始化

3. Then, add code to your App.js file：

import React from 'react'
import './index.scss'
import routers from '@/routers'
import { dynamicModuleLoading, onRouter } from 'jfreact-router'
import { HashRouter, Route, Switch } from 'react-router-dom'
class App extends React.component {
  constructor(props) {
    super(props)
    this.routers = []
    this.currentRoute = null // 当前路由
    this.CurrentPage = null // 当前页面
    this.dynamicModuleLoading = dynamicModuleLoading.bind(this)
  }

  UNSAFE_componentWillMount() {
    this.dynamicModuleLoading(routers).then(({ currentRoute, CurrentPage }) => {
      this.CurrentPage = CurrentPage
      this.currentRoute = currentRoute
      this.forceUpdate()
    })
    // url地址变化后动态加载模块
    onRouter(() => {
      this.dynamicModuleLoading(routers).then(
        ({ currentRoute, CurrentPage }) => {
          this.CurrentPage = CurrentPage
          this.currentRoute = currentRoute
          this.forceUpdate()
        }
      )
    })
  }

  render() {
    const { CurrentPage, currentRoute } = this
    return (
      <div className="app">
        <HashRouter>
          <Switch>
            {CurrentPage && currentRoute && currentRoute?.path ? (
              <Route
                exact
                path={currentRoute?.path}
                render={() => {
                  return <CurrentPage />
                }}
              />
            ) : null}
          </Switch>
        </HashRouter>
      </div>
    )
  }
}

export default App

4.Added global routing parameter access, you can add code in base-component:

// 获取路由参数
  $query() {
    return window.$jfrouter?.query || {}
  }

Modules

• creteJfRouter Flattened your router data structure
• dynamicModuleLoading Dynamic loading your business module
• Dispatcher Event bus
• initJfRouter Start watching url address change
• onRouter Watching url change callback