React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)
2018-01-23 17:32
1061 查看
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22
2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23
3、React第三方组件1(路由管理之Router的使用③传参)---2018.01.24
4、React第三方组件1(路由管理之Router的使用④按需加载-上)---2018.01.25
5、React第三方组件1(路由管理之Router的使用⑤按需加载-下)---2018.01.26
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
路由下面还有路由,如何实现?
今天来讲下多层级理由的实现及如何重定向!
比如我们需要实现,demo2,下面还有两个页面 demo2-1、demo2-2
我们打开demo2下面的Index.jsx 页面修改代码,如下:
import React from 'react'; import TodoList from './TodoList'; import {Route, NavLink} from 'react-router-dom' const Index = () => <div> <div className="nav"> <NavLink to="/demo2/demo2-1" activeClassName="selected" exact>demo2-1</NavLink> <NavLink to="/demo2/demo2-2" activeClassName="selected" exact>demo2-2</NavLink> </div> <Route path="/demo2/demo2-1" component={TodoList}/> <Route path="/demo2/demo2-2" component={TodoList}/> </div> ; export default Index;
我们就看下浏览器效果
已经实现了,但我们发现一个问题:
当点击demo2的时候,页面是空白的!
我们希望他默认选中demo2-1,也就是重定向到 demo2-1
我们优化下代码:
引入 Redirect
import {Route, NavLink, Redirect} from 'react-router-dom'
加入
<Route exact path="/demo2/" render={() => (<Redirect to="/demo2/demo2-1"/>)}/>
看下浏览器效果
好,已经实现!
但又发现一个问题,demo2,没有变红,我们希望demo2,是变红的!
我们再来改下代码:
这次需要修改首页路由,如下:
去掉 exact 属性
<NavLink to="/demo2" activeClassName="selected">demo2</NavLink>
再看下浏览器
OK 实现!
我们再来优化下代码:
这里有很多相同一级名称,是可以优化下的!
这里我打印下 match,让大家更直观理解 match 是什么
本文完
![](https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_42.png?wx_lazy=1)
![](https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_42.png?wx_lazy=1)
![](https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/smiley/smiley_42.png?wx_lazy=1)
![](https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/emoji_ios/u1F389.png?wx_lazy=1)
![](https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/emoji_ios/u1F389.png?wx_lazy=1)
![](https://res.wx.qq.com/mpres/htmledition/images/icon/common/emotion_panel/emoji_ios/u1F389.png?wx_lazy=1)
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
相关文章推荐
- React第三方组件1(路由管理之Router的使用①简单使用)
- React第三方组件1(路由管理之Router的使用③传参)
- React第三方组件1(路由管理之Router的使用⑤按需加载-下)
- React第三方组件1(路由管理之Router的使用④按需加载-上)
- React第三方组件2(状态管理之Refast的使用③扩展ctx)
- React第三方组件3(状态管理之Flux的使用②TodoList上)
- React第三方组件5(状态管理之Redux的使用④TodoList下)
- React第三方组件2(状态管理之Refast的使用④中间件middleware使用)
- React第三方组件6(状态管理之Mobx的使用②TodoList上)
- React第三方组件6(状态管理之Mobx的使用③TodoList中)
- React第三方组件4(状态管理之Reflux的使用③TodoList中)
- 使用react-router-dom优雅的实现页面(路由)跳转, 而且保持当前页面状态
- React第三方组件5(状态管理之Redux的使用⑤异步操作)
- React第三方组件5(状态管理之Redux的使用⑥Redux DevTools)
- React第三方组件5(状态管理之Redux的使用①简单使用)
- React第三方组件2(状态管理之Refast的使用①简单使用)
- React第三方组件3(状态管理之Flux的使用①简单使用)
- react-router v4如何使用history控制路由跳转详解
- React第三方组件4(状态管理之Reflux的使用①简单使用)
- React第三方组件2(状态管理之Refast的使用⑤LogicRender使用)