不出意外今天又很懒惰,不想写代码也不想开新坑也不想补老坑,所以就把最近项目中用到的 react-router-dom
写一篇博客吧~
作为 react-router4
的船新版本 react-router-dom
颠覆了传统的路由格式,将原本的格式化路由变成了组件化,无疑算是一大革新。其优劣暂且避开不谈,光是创新就让人们耳目一新了。网络对此褒贬不一,但本着有新用新的原则在我新开的坑里还是毅然决然的使用了 react-router4
。那么现在试着给大伙讲明白吧~
在正式开始之前我们将 模拟训练的教程网站 放在最前边,方便大家根据例子进行学习。当然,跟着我也行。
react-router-dom
其最大的革新点在于将原本的router.js
模式的路由映射文件改为组件化形式,我们只需要关注跳转(Link
)和组件(Route
),无需关心其他操作。
在学习之初我们只需要关心上述的两种组件,在诸如 NavBar
之类的标签栏用 <Link>
标签作为跳转项,但 <Route>
的配置就不像是之前一般,无需借助 router.js
,直接在组件内进行编辑。这也就造成了一个问题:我们只需要关注当前层的代码,而其内部嵌套则无需过多考虑。
Route
<Route>
的作用是当当前页面的 URL 与 <Route>
的 path
属性相匹配时就渲染出对应的界面,而我们所说的 “相应的界面” 无疑就是指其 component
咯~
<Route>
有三个属性,component
、render
、children
,而其应用场所各有不同