react-router-concent

连接concent与react-router，让你的concent应用完美接入react-router.

核心组件与api

使用方法1：ConnectRouter

在app顶层实例一个ConnectRouter，让concent连接上react-router

• {boolean} callUrlChangeOnInit=false
• {(history:object)=>{}} connected 连接上router的回调函数

1// 设置callUrlChangeOnInit为true时，
2// 由路由切换导致的挂载上的组件，如果该组件定义了$onUrlChanged，则初次挂载的时候就会触发器$onUrlChanged函数的执行
3<ConnectRouter callUrlChangeOnInit={true} />
4
5// callUrlChangeOnInit默认是false，
6// 此种情况，定义了$onUrlChanged的cc类在初次挂载的时候，不会触发$onUrlChanged函数的执行
7// 只有在存在期间，如果用户反复点同一个路由url，会触发$onUrlChanged函数的执行
8<ConnectRouter  />

使用方法2：createHistoryProxy

1createHistoryProxy: (history: RouterHistory, callUrlChangeOnInit?:boolean)

在顶层容器里，只会初始化一次的地方掉用createHistoryProxy

Link

负责跳转匹配路径规则的路由

• {string} prop.to 要跳转的路由路径
• {object} props.?style 样式
• {boolean} props.?stop=true, 默认是true，触发调用e.stopPropagation
• {(to:string)=>{}} props.?onClick 点击后的触发回调函数，第一位参数是定义的路径to

1import { Link } from 'react-router-concent';
2
3<Link to="/user/:id" style={{border:1px}}>

history

除了Link，用户也可以使用history直接跳转或者执行其他操作，api与react-router提供的完全保持一致

• history.push(path:string)，跳转到某个路径的路由页面
• 其他history.*** 参考react-router的提供与实现

1import { history } from 'react-router-concent';
2
3<div onClick={()=>history.push('/path')}>点我跳转</div>

cc类的扩展函数$$onUrlChanged

在cc类setup里设定事件onUrlChanged的监听函数，当调用了history.push、history.goBack，history.goForward、history.replace的时候, 如果对应的组件还处于存在期，concent会触发该函数

1@register()
2class Foo extends React.Component{
3  $$setup(ctx){
4    ctx.on('onUrlChanged', ()=>{
5      // do something here like initPage
6    });
7  }
8}
9
10<Route path="/user/:id" component={Foo} />

关于store

启动concent之后，如果配置了路由，则history模块下的所有操作都将状态同步到了store的$$CONCENT_ROUTER模块下，可以在console里打开输入sss回车并查看

1import { run, configureRoute } from 'react-router-concent';
2
3// 启动concent
4run();
5
6//配置路由，连击路由到store
7configureRoute();

✨使用范例，在线示例点我

1import React, { Component } from 'react'
2import ReactDOM from 'react-dom'
3import { BrowserRouter, Switch, Route } from 'react-router-dom';
4import { ConnectRouter, history, Link } from 'react-router-concent';
5import { run, register, CcFragment } from 'concent';
6
7run();
8
9class User extends Component {
10  $$setup(ctx) {
11    ctx.on('onUrlChanged', () => {
12      console.log(params);
13      this.init('onUrlChanged');
14    });
15
16    // mock componentDidMount
17    ctx.effect(() => {
18      this.init('componentDidMount');
19    }, []);
20  }
21  init = (by) => {
22    console.log('%c init User, triggered by ' + by, 'color:red; border:1px solid red');
23  }
24  render() {
25    return (
26      <div style={{ border: '1px solid blue', margin: '19px' }}>
27        <h3>user</h3>
28      </div>
29    );
30  }
31}
32const User_ = register('User')(User);
33
34class UserDetail extends Component {
35  $$setup(ctx) {
36    ctx.on('onUrlChanged', () => {
37      console.log(params);
38      this.init('onUrlChanged');
39    });
40
41    ctx.effect(() => {
42      this.init('componentDidMount');
43    }, []);
44  }
45  init = (by) => {
46    console.log('%c init UserDetail, triggered by ' + by, 'color:red; border:1px solid red');
47  }
48  render() {
49    return (
50      <div>
51        <h3>user detail</h3>
52      </div>
53    );
54  }
55}
56
57const UserDetail_ = register('UserDetail')(UserDetail);
58
59const setup = ctx => {
60  ctx.on('onUrlChanged', (params, action) => {
61    ctx.setState({ msg: 'url changed ' + Date.now() });
62  });
63}
64const iState = { msg: '' };
65
66const F = () => (
67  <CcFragment register={{setup,state:iState}} render={ctx => {
68    return <h1>fragment msg: {ctx.state.msg}</h1>
69  }} />
70);
71
72function FnComp(){
73  const ctx = useConcent({setup,state:iState});
74  return <h1>fragment msg: {ctx.state.msg}</h1>
75}
76
77class Layout extends Component {
78  render() {
79    console.log('Layout Layout');
80    return (
81      <div>
82        <div onClick={() => history.push('/user')}>go to user page</div>
83        <div onClick={() => history.push('/user/55')}>go to userDetail page</div>
84        {/** 可以基于history主动push，也可以使用Link */}
85        <Link to="/user" onClick={to => alert(to)}>to user</Link>
86        <div onClick={() => history.push('/wow')}>fragment</div>
87
88        <Route path="/user" component={User_} />
89        <Route path="/user/:id" component={UserDetail_} />
90        <Route path="/wow" component={F} />
91        <Route path="/fn-comp" component={FnComp} />
92      </div>
93    )
94  }
95}
96
97const App = () => (
98  <BrowserRouter>
99    <div id="app-root-node">
100      <ConnectRouter />
101      <Route path="/" component={Layout} />
102    </div>
103  </BrowserRouter>
104)
105ReactDOM.render(<App />, document.getElementById('root'));