React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

本教程总共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;


React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

我们就看下浏览器效果


React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

已经实现了,但我们发现一个问题:

当点击demo2的时候,页面是空白的!

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

我们希望他默认选中demo2-1,也就是重定向到 demo2-1

我们优化下代码:

引入 Redirect

import {Route, NavLink, Redirect} from 'react-router-dom'

加入

<Route exact path="/demo2/"
      render={() => (<Redirect to="/demo2/demo2-1"/>)}/>

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

看下浏览器效果


React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

好,已经实现!

但又发现一个问题,demo2,没有变红,我们希望demo2,是变红的!

我们再来改下代码:

这次需要修改首页路由,如下:

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

去掉 exact 属性

<NavLink to="/demo2" activeClassName="selected">demo2</NavLink>

再看下浏览器

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

OK 实现!

我们再来优化下代码:

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

这里有很多相同一级名称,是可以优化下的!

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

这里我打印下  match,让大家更直观理解 match 是什么

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)


本文完 React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!

React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)