react下一代路由margaret教程

啥都不说，先上传送门：github地址

 说起react的路由，有很多痛，都是用react-router一套撸天下，但是很多时候，用起来很多的不爽，却又没有什么能够替代的，只能选择忍了，如今react也进入了hook的时代了，数据流管理也可以不用redux了，一切都变了，最新一代的react hook路由也就出现了，下面我们来看看margaret要怎么用

1. 老师我想用路由，但是比较懒，不想学，不想配置复杂，能行吗？

答：可以，你npm安装一下margaret吧

然后在入口文件index.js里用Provider包裹一下

import {MgProvider} from "margaret";
import * as reducer from "./reducer";

<MgProvider reducer={reducer}>    
    <App/>
</MgProvider>

现在可以用路由了，路由又恢复昔日的集中配置模式了，支持嵌套，还支持状态型路由，让我们能切换路由后，之前页面的状态依然存在

import {KeepRouter,history} from "margaret"let baseRoutes = [{    name: "home",    path: "/",    hide: true,    component: Home,}, {    name: "page1",    path: "/page1",    component: Page1,}, {    name: "page2",    path: "/page2",    component: Page2,},{    name: "page5",    path: "/page5",    redirect:"/page5/page3",    children: [{        name: "page3",        path: "/page3",        component: Page3,    }]}]

export default function Index(prop) {    
    const {dispatch, mgRouter} = mg()    
    return (        
        <KeepRouter data={baseRoutes}/>            )}

在页面中，怎么使用呢？很简单依然是history和Link标签的形式

import React, {Fragment, useEffect, useState} from 'react';
import {history, Link} from "margaret";

let defaultProps = {}export default function Index(prop) 
{   
    const [count, setCount] = useState(0);  
    let props = {    ...defaultProps, ...prop  }  
    const {} = props;

    const {dispatch,mgKeepRouter, setKeepRouterData} = mg()      const goTo = (url) => {    
        history.push(url)  
        }  return (    
    <div>      内页1        
    <input type="text"/>        
    <Link to="/page2">link的去内页2</Link>      
    <a onClick={() => goTo("/page1")}>内页1</a>      
    <a onClick={() => goTo("/page2")}>内页2</a>      
    <a onClick={() => goTo("/page5/page3", {state: 11})}>内页3</a>    
</div>  
);}

最重要的就是mgKeepRouter和setKeepRouterData了，mgKeepRouter就是能获取当前所有路由的数据和状态，是否是打开的，setKeepRouterData就是可以我们处理过路由数据了，可以再回传给margaret，大家共享一个数据，实现类似于中后台系统需要标签页这种需求

2. 老师你上面那个reducer是什么，我怎么没看到

答：你观察的真仔细，reducer就是margaret里面自带的数据流处理库的reducer，就是简化版的redux，以上你已经完全引入了，后面的就是使用了,如以下reducer.js

export const count1 = (state = 1, action={}) => {    
// console.log(77,state,action)    
    switch (action.type) {        
    case "ADD":            
    return state + 1;        
    case "JIAN":            
    return state - 1;        
    default:            
    return state;   
 }}
export const count2 = (state = 3, action={}) => {    
// console.log(88,state,action)    
    switch (action.type) {        
    case "ADD2":            
    return state + 2;        
    case "JIAN2":            
    return state - 2;        
    default:            
    return state;    
}}

用的话就是这样的:

export default function Index(prop) {    
// Declare a new state variable, which we'll call "count"    
const {count1, count2, dispatch, setKeepRouterData} = mg()    

return (        
<Fragment>            
{count1}            
<button onClick={() => {                
dispatch({                    
type: "ADD"                
})            
}}>加            
</button>            
<button onClick={() => {                
dispatch({                    
type: "JIAN"                
})            
}}>减            
</button>            
<br/>            
{count2}            
<button onClick={() => {                
dispatch({                    
type: "ADD2"                
})            
}}>加1            
</button>            
<button onClick={() => {                
dispatch({                    
type: "JIAN2"                
})            
}}>减            
</button>            
</Fragment>    
);}

至此，基本的用法就结束了，真的是很简单，如果大家有兴趣的话就点个赞吧，我后面深度使用之后，再更新教程