|
1 | | -importReact,{Component}from'react'; |
2 | | -import{UIRouter,useSrefActive,UIView}from'@uirouter/react'; |
| 1 | +import*asReactfrom'react'; |
| 2 | +import{UIRouter,useSrefActive,useRouter,UIView}from'@uirouter/react'; |
3 | 3 | import{pushStateLocationPlugin}from'@uirouter/core'; |
4 | 4 | import{Visualizer}from'@uirouter/visualizer'; |
5 | 5 | import{StickyStatesPlugin}from'@uirouter/sticky-states'; |
@@ -29,52 +29,45 @@ const states = [ |
29 | 29 | }, |
30 | 30 | ]; |
31 | 31 |
|
32 | | -classAppextendsComponent{ |
33 | | -constructor(props){ |
34 | | -super(props); |
35 | | -this.state={ |
36 | | -currentState:null, |
37 | | -}; |
38 | | -} |
| 32 | +functionrouterConfig(router){ |
| 33 | +router.urlService.rules.initial({state:'home'}); |
| 34 | +} |
| 35 | + |
| 36 | +functionAppRoot(){ |
| 37 | +return( |
| 38 | +<UIRouterplugins={plugins}states={states}config={routerConfig}> |
| 39 | +<App/> |
| 40 | +</UIRouter> |
| 41 | +); |
| 42 | +} |
39 | 43 |
|
40 | | -routerConfig(router){ |
41 | | -router.urlService.rules.initial({state:'home'}); |
42 | | -this.unsub=router.transitionService.onSuccess({},(transition)=>{ |
43 | | -this.setState({currentRouterState:transition.to().name}); |
44 | | -console.log(transition); |
45 | | -}); |
46 | | -} |
| 44 | +functionApp(){ |
| 45 | +constglobals=useRouter().globals; |
47 | 46 |
|
48 | | -componentWillUnmount(){ |
49 | | -this.unsub&&this.unsub(); |
50 | | -} |
| 47 | +constcurrentState=globals.current.name; |
51 | 48 |
|
52 | | -render(){ |
53 | | -constcurrent=this.state.currentRouterState; |
54 | | -constshowHideStyle=(statename)=>({ |
55 | | -display:current===statename ?'block' :'none', |
56 | | -}); |
| 49 | +constshowHideStyle=(statename)=>({ |
| 50 | +display:currentState===statename ?'block' :'none', |
| 51 | +}); |
57 | 52 |
|
58 | | -consthomeSref=useSrefActive('home',null,'active'); |
59 | | -constaboutSref=useSrefActive('about',null,'active'); |
| 53 | +consthomeSref=useSrefActive('home',null,'active'); |
| 54 | +constaboutSref=useSrefActive('about',null,'active'); |
60 | 55 |
|
61 | | -return( |
62 | | -<UIRouterplugins={plugins}states={states}config={(router)=>this.routerConfig(router)}> |
63 | | -<div> |
64 | | -<a{...homeSref}>home</a> |
65 | | -<a{...aboutSref}>about</a> |
| 56 | +return( |
| 57 | +<div> |
| 58 | +{currentState} |
| 59 | +<a{...homeSref}>home</a> |
| 60 | +<a{...aboutSref}>about</a> |
66 | 61 |
|
67 | | -<divstyle={showHideStyle('home')}id="home"> |
68 | | -<UIViewname="home"/> |
69 | | -</div> |
| 62 | +<divstyle={showHideStyle('home')}id="home"> |
| 63 | +<UIViewname="home"/> |
| 64 | +</div> |
70 | 65 |
|
71 | | -<divstyle={showHideStyle('about')}id="about"> |
72 | | -<UIViewname="about"/> |
73 | | -</div> |
74 | | -</div> |
75 | | -</UIRouter> |
76 | | -); |
77 | | -} |
| 66 | +<divstyle={showHideStyle('about')}id="about"> |
| 67 | +<UIViewname="about"/> |
| 68 | +</div> |
| 69 | +</div> |
| 70 | +); |
78 | 71 | } |
79 | 72 |
|
80 | | -exportdefaultApp; |
| 73 | +exportdefaultAppRoot; |