React的路由模块设计

如果从React的角度设计路由的话,其实还是比较简单的。
比如如果点击一个链接触发一个新的路由,那么你可以在这个链接写上这样的触发事件:

在Flux中添加Action:

updateURL(new_url) {
    Dispatcher.dispatch({ type: 'UPDATE_URL', url});
}

添加一个存储URL的Store

getInitialState() {
    return '/';
}

reduce(state, action) {
    switch(action.type) {
        case 'UPDATE_URL':
            return action.url;
    }
}

在Flux Container引入事件:

onUpdateUrl: TodoActions.updateURL,

在View视图中触发事件:

<a onClick={props.onUpdateUrl('/myURL')} />

在顶部Component之上添加路由Component:

function Router(props) {
    if(props.url == '/') {
        return (<App1 {...props} />);
    }
    if(props.url == '/myURL') {
        return (<App2 {...props} />);
    }
    return (<NotFound {...props} />);
}

当然,这样是最简单的方案,但是实际中肯定不会用触发点击事件的方式去实现更改URL,而是直接给<a>标签一个href,然后用户点击href,被事件系统拦截到了然后自动被分配一个Action,然后被dispatcher进行dispatch。

还有,用户直接复制url访问的问题,此时就需要系统在系统启动时检查一下当前的url是多少,然后在getInitial中获取当前url。

另外,还有一个古老的问题,就是把访问历史要记得添加到history里面去。

最后,还有一点疑问,就是用户手动修改url可以被拦截到么?是不是就可以避免重新加载。

标签: none

添加新评论