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;

我們就看下瀏覽器效果

已經實現了，但我們發現一個問題：

當點擊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 是什麼

本文完 

禁止擅自轉載,如需轉載請在公眾號中留言聯絡我們!

感謝童鞋們支援!

如果你有什麼問題,可以在下方留言給我們!