08月10, 2017

react-route 4 记录

同事在新项目上使用了react-route4,为了跟上时代潮流,于是乎我也开始学习和折腾。

我的学习曲线是这样的:

前人栽树,后人乘凉。。

感谢这些资料,让我清楚地知道了,react-route 3是基于静态路由的设计,而4则是基于动态路由的设计。

也许有些人觉得路由分散在各个模块里面,这不是一个太好的方案。但是回过头来想,如果删除一些模块,它所拥有的路由模块也会被一并删除,而在react-route3里面,我们还需要手动删除。

对我而言,我比较关注这几点:

  • 权限(即之前route3里面的onEnter事件)
  • 菜单高亮
  • 动态加载路由(代码拆分、分片加载)

权限的问题,因为route4的概念已经是Component模块了,所以控制可以写到:componentWillMount里面去。

具体还未尝试,不过同事写的代码大概思路是这样的。


菜单高亮

这个使用NavLink即可:

<NavLink exact activeClassName="active" to="/">首页</NavLink>
<NavLink activeClassName="active" to="/about/all" isActive={(match, location) => {
      console.dir(location);
      if (location.pathname.indexOf("about") != -1) {
        return true;
      }
      return false;
    }
}>关于</NavLink>

简单解释一下为什么会有isActive判断,比如说我有这样的一个需求:

/about/all
/about/update

都需要同一个菜单高亮,那么我们就需要用这个来做判断处理了,当然我上面的indexOf这种判断并不严谨。


代码拆分

我觉得文档里面写的方案太过于复杂。

后来经过搜索之后,让我找到了这个库:react-router-async-component

翻了一下源码,解决思路与文档的差不多,但甚在它可以直接调用:

import Acomponent from 'react-router-async-component'

const CustomLinkExample = () => (
    <Router>
        <div>
            <NavLink exact activeClassName="active" to="/">首页</NavLink>
            <NavLink activeClassName="active" to="/about/all" isActive={(match, location) => {
                  console.dir(location);
                  if (location.pathname.indexOf("about") != -1) {
                    return true;
                  }
                  return false;
                }
            }>关于</NavLink>
            <hr/>
            <Route exact path="/" component={() => <Acomponent from={import('./component/Home')}/>} />
            <Route exact path="/about" component={() => <Acomponent from={import('./component/About')} /> }/>
            <Route path="/about/sub" component={ () => <Acomponent from={import('./component/Sub')}  /> } />
        </div>
    </Router>
)

alt

顺利搞定,就待下一次具体在项目中使用了。

本文链接:www.my-fe.pub/post/react-route-4-note.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。