1.0.7 • Published 3 years ago
jfreact-router v1.0.7
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
- 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)
- Init router in
index.js
file:
import { initJfRouter } from 'jfreact-router'
initJfRouter() // 初始化
- 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 structuredynamicModuleLoading
Dynamic loading your business moduleDispatcher
Event businitJfRouter
Start watching url address changeonRouter
Watching url change callback