ReactRouter-V5免費圖文視訊教程（我免費，有培訓機構什麼事，就出！）

技術胖發表於2019-08-12
React

React-Router

最近一直有培訓機構加我微信和QQ對我進行辱罵，我出免費視訊，你培訓機構怎麼了，市場那麼大，你賺錢還不準人家自願作免費嗎？我就出，每週三集免費視訊教程，目標1000集。

React Router 是一個基於React之上的強大路由庫，它可以讓你嚮應用中快速地新增檢視和資料流，同時保持頁面與URL間的同步。這是官方的解釋，雖然足以解釋React Router，但我覺的還不夠重視這個外掛。就目前我的工作經驗所知，凡是React技術棧的專案（WEB和Native），都需要用到React Router。有了它你才可以構建複雜的應用程式，有了它才能使應用有層次感。如果沒有React Router，我們智慧用switch...case這樣的語句，進行判斷渲染，這非常的麻煩，而且不可用；但是有了React Router一切就變的簡單了。

學習這個文章之前，我預設你已經學習了前置的兩篇文章，所以很多基礎的內容我不會講解。

  1. React16免費視訊教程（共28集）
  2. Redux免費視訊教程（共24集）

如果你基礎還沒有學習，我建議你先學習這兩個視訊教程，如果認證學，應該一個週末（兩天）時間就可以學完，然後你再回來看這篇文章會輕鬆很多。

如果你正好在學習React，你可以加入QQ群:159579268，和小夥伴們一起討論。

P00: React Router 視訊合集列表

01.React Router 安裝和基礎環境搭建

02.像製作普通網頁一樣使用ReactRouter

03.ReactRouter動態傳值-1

04.ReactRouter動態傳值-2

05.ReactRouter重定向-Redirect使用

06.例項-ReactRouter巢狀路由-1

07.例項-ReactRouter巢狀路由-2

08. 例項-ReactRouter巢狀路由-3

09.後臺動態獲取路由進行配置

P01: React Router 安裝和基礎環境搭建

這節課我們就先安裝一下React Router 學習開發的基礎環境和作一個最簡單的例子.

用creact-react-app腳手架初始化專案

1.如果你沒有安裝腳手架工具，你需要安裝一下:

npm install -g create-react-app
複製程式碼

如果你學了前邊的課程，這一步一般都是完成的，可以省略掉。-g代表的是系統全域性安裝的意思。

2.直接使用腳手架工具建立專案

D:  //進入D盤
mkdir ReactRouterDemo   //建立ReactRouterDemo資料夾
cd ReactRouterDemo      //進入資料夾
create-react-app demo01  //用腳手架建立React專案
cd demo01   //等專案建立完成後，進入專案目錄
npm  start  //預覽專案
複製程式碼

這樣專案就製作好了，我們刪除一下沒用的檔案，讓程式碼結構保持最小化。刪除SRC裡邊的所有檔案，只留一個index.js,並且index.js檔案裡也都清空。

使用npm安裝React Router

然後你可以在你的程式碼編輯工具中開啟這個專案，我這裡使用的是VSCode，其實用什麼無所謂，但是如果你是新手，還是建議你和我使用一樣的編輯器，這樣能保證和視訊中的演示過程一樣。 按ctrl+~代開終端，然後進入demo01,在終端中用npm直接安裝React Router.

npm install --save react-router-dom
複製程式碼

安裝完成後可以到package.json裡看一下安裝的版本，我目前安裝的是5.0.1,你學習的時候版本可能不一樣，也許有些API不適用，你可以在入門後自己到官網檢視API學習。

編寫一個最簡單的路由程式

首先我們改寫src檔案目錄下的index.js程式碼。改為下面的程式碼,具體的意思在視訊中講解:

import React from 'react';
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'

ReactDOM.render(<AppRouter/>,document.getElementById('root'))
複製程式碼

現在的AppRouter元件是沒有的，我們可以在src目錄下建立一個AppRouter.js檔案，然後寫入下面的程式碼。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function Index() {
  return <h2>JSPang.com</h2>;
}

function List() {
  return <h2>List-Page</h2>;
}

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首頁</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}
export default AppRouter;
複製程式碼

這時候就可以到瀏覽器中看一下效果了，如果一切正常，就可以實現頁面跳轉。但這只是最簡單的頁面跳轉，第一節課先學這麼多。

P02: 像製作普通網頁一樣使用ReactRouter

通過上節的學習，有小夥伴反應這和他們平時工作中見到的不太一樣，現實中是每個頁面都是一個完整的有狀態元件，然後我們再進行跳轉，而不是寫在一個頁面裡的多個無狀態元件。所以覺的不太適用，這節課就把上節課的案例，做成我們工作中的樣子，或者說更貼合實際開發.還會講解一下精確匹配的知識。

編寫Index元件

先在/src目錄下建立一個資料夾，我這裡起名叫做Pages（你可以起任何名字），然後建立一個元件檔案Index.js。這裡邊我們就完全安裝工作中的模式來寫，只是沒有什麼業務邏輯，UI也製作的相當加簡單。程式碼如下：

import React, { Component } from 'react';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>JSPang.com</h2> );
    }
}
 
export default Index;

複製程式碼

編寫List元件

編寫完Index元件以後，繼續編寫List元件。其實這個元件和Index基本一樣。程式碼如下:

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
}
 
export default List;
複製程式碼

修改AppRouter.js檔案

兩個元件製作完成後，我們把它引入路由配置檔案，然後進行路由的配置就可以了，程式碼如下：

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首頁</Link> </li>
            <li><Link to="/list/">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}

export default AppRouter;

複製程式碼

現在看起來就和我們實際工作中差不多了，也和我們平時寫的普通html頁面很類似了。

exact精準匹配的意思

這個也是一個小夥伴問我的問題，精準匹配到底是什麼？其實這個很好理解，從字面上就可以猜出結果，就是你的路徑資訊要完全匹配成功，才可以實現跳轉，匹配一部分是不行的。

比如我們把Index的精準匹配去掉，你會發現，無論你的位址列輸入什麼都可以匹配到Index元件，這並不是我們想要的結果。

<Route path="/" component={Index} />
複製程式碼

所以我們加上了精準匹配exact。你可以再試著訪問一下List元件，來更深入的瞭解一下精準匹配。

這節課主要是解決小夥伴的疑問，第一節課確實會增加一些同學的學習成本，也是在講課中的一些不足的地方的改進。

P03: ReactRouter動態傳值-1

現在已經解決了連結跳轉的問題，那現在想象這樣一個場景，在一個很多文章的列表頁面，然後點選任何一個連結，都可以準確的開啟詳細的文章內容，這就需要靠傳遞文章ID，然後後臺準確檢索文章內容最後呈現。這個過程每次傳遞到詳細頁面的ID值都是不一樣的，所以就需要路由有動態傳值的能力。

在Route上設定允許動態傳值

這個設定是以:開始的，然後緊跟著你傳遞的key（鍵名稱）名稱。我們來看一個簡單的例子。

<Route path="/list/:id" component={List} />
複製程式碼

看過程式碼後，你會覺的很簡單，就是在path上加:id。這樣就設定了允許傳值的規則。

Link上傳遞值

設定好規則後，就可以在Link上設定值了，現在設定傳遞的ID值了，這時候不用再新增id了，直接寫值就可以了。

 <li><Link to="/list/123">列表</Link> </li>
複製程式碼

現在就可以進行傳值了。為了方便你的學習，這裡給出全部AppRouter.js程式碼。

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Index from './Pages/Index'
import List from './Pages/List'

function AppRouter() {
  return (
    <Router>
        <ul>
            <li> <Link to="/">首頁</Link> </li>
            <li><Link to="/list/123">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/:id" component={List} />
    </Router>
  );
}

export default AppRouter;

複製程式碼

在List元件上接收並顯示傳遞值

元件接收傳遞過來的值的時候，可以在宣告週期componentDidMount中進行，傳遞的值在this.props.match中。我們可以先列印出來,程式碼如下。

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
    //-關鍵程式碼---------start
    componentDidMount(){
        console.log(this.props.match)
    }
    //-關鍵艾瑪---------end
}
 
export default List;
複製程式碼

然後在瀏覽器的控制檯中可以看到列印出的物件，物件包括三個部分:

  • patch:自己定義的路由規則，可以清楚的看到是可以產地id引數的。
  • url: 真實的訪問路徑，這上面可以清楚的看到傳遞過來的引數是什麼。
  • params：傳遞過來的引數，key和value值。

明白了match中的物件屬性，就可以輕鬆取得傳遞過來的ID值了。程式碼如下:

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page->{this.state.id}</h2> );
    }
    componentDidMount(){
       // console.log(this.props.match.params.id)
       let tempId=this.props.match.params.id
        this.setState({id:tempId })
    }
}
 
export default List;

複製程式碼

這樣就實現了動態傳值，需要注意的是如果你不傳任何東西，是沒辦法匹配路由成功的。下一節我們更加形象的作一個動態列表，然後進行動態傳值。這節課算是一個理論基礎吧。

P04: ReactRouter動態傳值-2

上節課動態傳遞的值是寫死的，缺少靈活性，但是我講了很多動態傳值的理論，也算是對React Router動態傳值有了初步認識。這節課形象的模擬一個動態的資料列表，並把列表中的值傳遞到詳細頁中。其實這節課的知識點上節課都已經講過了，算是一個小練習吧。我需要在這裡再次說明的是，你只看視訊是什麼都學不會的，你只有一遍看視訊一遍敲出效果才可以學會，我也真心希望你能在這裡學會。

模擬一個列表陣列

現在可以在Index元件裡模擬一個列表陣列，就相當於我們從後臺動態獲取到的內容，然後陣列中包括文章的cid和title。直接在state初始化時進行設定，程式碼如下：

 constructor(props) {
    super(props);
    this.state = { 
        list:[
            {cid:123,title:'技術胖的個人部落格-1'},
            {cid:456,title:'技術胖的個人部落格-2'},
            {cid:789,title:'技術胖的個人部落格-3'},
        ]
    }
}
複製程式碼

有了list陣列後，再修改一下UI，進行有效的遍歷，Render程式碼如下。


 render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}> {item.title} </li>
                    )
                })
            }
        </ul>
    )
}

複製程式碼

列表已經可以在Index元件裡顯示出來了，接下來可以配置<Link>了,在配置之前，你需要先引入Link元件。

import { Link } from "react-router-dom";
複製程式碼

引入後直接使用進行跳轉就可以，但是需要注意一點，要用{}的形式，也就是把to裡邊的內容解析成JS的形式，這樣才能順利的傳值過去。

render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}>
                            <Link to={'/list/'+item.uid}> {item.title}</Link> 
                        </li>
                    )
                })
            }
        </ul>
    )
}
複製程式碼

到目前為止，已經很類似我們專案中的列表向詳細頁進行傳值了。為了方便你學習，給出Index.js的所有程式碼.

import React, { Component } from 'react';
import { Link } from "react-router-dom";

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {uid:123,title:'技術胖的個人部落格-1'},
                {uid:456,title:'技術胖的個人部落格-2'},
                {uid:789,title:'技術胖的個人部落格-3'},
            ]
         }
    }
    render() { 
        return ( 
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <li key={index}>
                               <Link to={'/list/'+item.uid}> {item.title}</Link> 
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}
 
export default Index;
複製程式碼

通過四小節的學習，你一定對React Router有了基本的瞭解，接下來的學習會稍微提升一點難度，所以你先要把這四小節課學好，練好.再向下進行。

P05: ReactRouter重定向-Redirect使用

在寫這篇文章的時候哦，我看了一些相關的React Router Redirect的文章，講的都是很繁瑣，其實我認為寫一篇入門文章並不是秀技術，而是讓別人能看到，能做出來，並且以後可以自己深入。如果能作到這三點就算是一篇不錯的文章。我認為Redirect(重定向)，你就掌握基本的兩個知識點就可以了。

  • 標籤式重定向:就是利用<Redirect>標籤來進行重定向，業務邏輯不復雜時建議使用這種。
  • 程式設計式重定向:這種是利用程式設計的方式，一般用於業務邏輯當中，比如登入成功挑戰到會員中心頁面。

重定向和跳轉有一個重要的區別，就是跳轉式可以用瀏覽器的回退按鈕返回上一級的，而重定向是不可以的。

標籤式重定向

這個一般用在不是很複雜的業務邏輯中，比如我們進入Index元件，然後Index元件,直接重定向到Home元件。我們也結合這個場景，看一下如何實現。

首先建立一個Home.js的頁面，這個頁面我還是用快速生成的方式來進行編寫，程式碼如下。

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 頁面</h2> );
    }
}
 
export default Home;
複製程式碼

這個頁面非常簡單，就是一個普通的有狀態元件。

有了元件後可以配置一下路由規則，也就是在AppRouter.js里加一個<Route>配置，配置時記得引入Home元件。

import Home from './Pages/Home'
<Route path="/home/" component={Home} />
複製程式碼

之後開啟Index.js檔案，從Index元件重新定向到Home元件，需要先引入Redirect。

import { Link , Redirect } from "react-router-dom";

複製程式碼

引入Redirect後，直接在render函式裡使用就可以了。

 <Redirect to="/home/" />
複製程式碼

現在就可以實現頁面的重定向。

程式設計式重定向

程式設計式重定向就是不再利用<Redirect/>標籤，而是直接使用JS的語法實現重定向。他一般用在業務邏輯比較發雜的場合或者需要多次判斷的場合。我們這裡就不模擬複雜場景了，還是利用上邊的例子實現一下，讓大家看到結果就好。

比如直接在建構函式constructor中加入下面的重定向程式碼。

 this.props.history.push("/home/");  
複製程式碼

就可以順利實現跳轉，這樣看起來和上面的過程是一樣的。這兩種方式的重定向你可以根據真實需求使用，這樣能讓你的程式更加的靈活。課後你可以試著模擬使用者的登入過程試著用一下這樣的跳轉。

P06: 例項-ReactRouter巢狀路由-1

這節課開始學習巢狀路由，這種路由形式在網際網路上也是比較常見的。比如我們後臺的管理系統，大部分是用巢狀路由，來實現頁面的總體劃分。當然前端頁面也是會有很多巢狀路由的實現，比如我們經常看的掘金網站，裡邊多是巢狀路由（比如說掘金裡的沸點）。

我們將通過幾節課的時間來學習一下如何使用React Router中的巢狀路由，這也算是一個小例項，在這個過程中我們會複習以前的路由知識，並利用以前的知識構建有些複雜的路由關係。

案例草圖

用腳手架建立專案

重新建立一個專案Demo02,直接在VSCode裡輸入，下面的命令初始化專案程式碼。

create-react-app demo02
複製程式碼

這樣專案就建立好了，但是裡邊有很多暫時不需要的檔案，刪除這些，讓程式碼結構保持最小化。只留/src目錄裡的index.js檔案，然後再刪除一些index.js檔案裡無用的程式碼。

專案初始化好以後，再在安裝React Router,使用npm來進行安裝(安裝時記得要進入到Demo02資料夾中)。

npm install --save react-router-dom
複製程式碼

初始化基本目錄

根據草圖分析，可以指導有兩層關係，第一層是大類，第二層是子類別。先再/src目錄下建立一個Pages的資料夾。然後在/Pages目錄下再建立兩個目錄/video和/workPlace,然後在/src目錄下建立一個AppRouter.js檔案作為首頁和路由的配置檔案。目錄結構如下所示:

- src
|--Pages
   |--video
   |--workPlace
|--index.js
|--AppRouter.js
複製程式碼

建立完成後，我們先編寫AppRouter.js,為的是讓程式擁有首頁，並讓程式可以跑起來。檔案新建以後可以用快速生成程式碼的方式，把基本程式碼做完。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一級導航</h3>
                <ul>
                    <li> <Link to="/">部落格首頁</Link> </li>
                    <li><Link to="">視訊教程</Link> </li>
                    <li><Link to="">職場技能</Link> </li>
                </ul>
            </div>
            
            <div className="rightMain">
                <Route path="/"  exact component={Index} />
            </div>
          </div>
      </Router>
    );
  }
  
  export default AppRouter;
  
複製程式碼

寫完這個檔案，然後修改一下/src/index.js檔案，需要引入AppRouter，並進行Render渲染。

import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'


ReactDOM.render(<AppRouter />, document.getElementById('root'));
複製程式碼

這時候就可以在終端裡輸入npm start讓程式跑起來，然後去瀏覽器中進行檢視了。

新增基本樣式

在/src目錄下，新建一個index.css檔案，然後編寫下面的樣式。

body{
    padding: 0px;
    margin: 0px;
}

.mainDiv{
    display: flex;
    width: 100%;
}
.leftNav{
    width: 16%;
    background-color: #c0c0c0;
    color:#333;
    font-size:24px;
    height: 1000px;
    padding: 20px;
}
.rightMain{
    width: 84%;
    height:1000px;
    background-color: #fff;
    font-size:20px;
    
}
複製程式碼

寫完之後把這個CSS檔案引入到AppRouter.js檔案中，就可以有一定的樣式了。然後再到瀏覽器中檢視一下效果，如果能正常顯示，說明到目前為止，我們製作的是正確的。

P07: 例項-ReactRouter巢狀路由-2

這節課我們就將最主要的知識點，巢狀路由。接著上節課我們繼續新增我們的程式，把視訊部分的巢狀路由製作完成。巢狀路由簡單理解就是在子頁面中再設定一層新的路由導航規則。

編寫Video中的子頁面

在編寫Video.js頁面之前，我們需要在/src/Pages/video下面建立三個子檔案，分別是ReactPage.js,Flutter.js和Vue.js，也代表著不同的視訊頁面。

ReactPage.js元件

import React from "react";
function Reactpage(){
    return (<h2>我是React頁面</h2>)
}
export default Reactpage;
複製程式碼

Flutter.js元件

import React from "react";
function Flutter(){
    return (<h2>我是Flutter頁面</h2>)
}
export default Flutter;
複製程式碼

Vue.js元件

import React from "react";
function Vue(){
    return (<h2>我是Vue頁面</h2>)
}
export default Vue;
複製程式碼

這樣就相當於三個頁面做好了，當然我們們作的是非常簡單的。

編寫Video.js頁面

這個頁面就是二級導航的編寫，這個的編寫也是課程的重點。

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'


function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>視訊教程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default Video;
複製程式碼

修改AppRouter.js檔案

當我們的Video元件製作完成後，可以把它引入到AppRouter.js檔案中，然後配置對應的路由。為了方便你的學習，這裡給出了全部程式碼，並在重用修改的地方給予標註。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
//--關鍵程式碼------------start
import Video from './Pages/Video'
//--關鍵程式碼------------end
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一級導航</h3>
                <ul>
                    <li> <Link to="/">部落格首頁</Link> </li>
                    {/*--關鍵程式碼------------start*/}
                    <li><Link to="/video/">視訊教程</Link> </li>
                    {/*--關鍵程式碼------------end*/}
                    <li><Link to="">職場技能</Link> </li>
                </ul>
            </div>
            
            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                 {/*--關鍵程式碼------------start*/}
                <Route path="/video/"   component={Video} />
                 {/*--關鍵程式碼------------end*/}
            </div>
          </div>
      </Router>
    );
  }
  
  export default AppRouter;
  

複製程式碼

這時候就可以到瀏覽器中看看效果了，當然目前還沒有CSS樣式，所以不是很好看。

.topNav{
    height:50px ;
    background-color: #cfdefd;
}
.topNav ul{
   display: flex; 
   margin: 0px;
   padding: 0px;
}
.topNav li{
   padding: 10px;
   text-align: center;
   list-style: none;
 }
 .videoContent{
     padding:20px;
 }

複製程式碼

這樣我們就實現了React Router的路由巢狀功能，看起來還是非常簡單的。希望你可以學會，下節課我們把這個案例完善一下，寫完整。

P08: 例項-ReactRouter巢狀路由-3

這節課把"職場技能"這個連結的巢狀路由也作了，如果你對巢狀路由已經很熟悉，可以跳過這節課，直接學習下一節課。但是你如果想把這個小例項作完整，你可以按照這節課來進行。

編寫第三級子頁面

在"職場技能"裡只作兩個子頁面，"程式設計師加薪祕籍"和"程式設計師早起攻略"。在/src/Pages/workPlace目錄下，新建兩個檔案Money.js和Getup.js，然後編寫程式碼。

Money.js

import React from "react";
function Money(){
    return (<h2>程式設計師加薪祕籍詳情</h2>)
}
export default Money;
複製程式碼

Getup.js

import React from "react";
function Getup(){
    return (<h2>程式設計師早起攻略詳情</h2>)
}
export default Getup;
複製程式碼

編寫二級子頁面Workplace

在/src/Pages資料夾下建立一個Workplace.js頁面，作為二級子頁面。

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Money from './workPlace/Money'
import Getup from './workPlace/Getup'


function WorkPlace(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/Moeny">程式設計師加薪祕籍</Link></li>
                    <li><Link to="/workplace/Getup">程式設計師早起攻略</Link></li>
                   
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>職場軟技能</h3></div>
                <Route path="/workplace/Moeny/"   component={Money} />
                <Route path="/workplace/Getup/"   component={Getup} />
               
            </div>
        </div>
    )
}
export default WorkPlace;
複製程式碼

這個元件完成後，可以進入主路由裡把二級頁面配置一下。

配置主路由AppRouter.js

這個我就直接給出檔案程式碼了，思路是先引入要配置的路由Workplace,然後配置路由<Route>,最後編寫連結<Link>。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一級導航</h3>
                <ul>
                    <li> <Link to="/">部落格首頁</Link> </li>
                    <li><Link to="/video/">視訊教程</Link> </li>
                    <li><Link to="/workplace">職場技能</Link> </li>
                </ul>
            </div>
            
            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                <Route path="/video/"   component={Video} />
                <Route path="/workplace/"   component={Workplace} />
            </div>
          </div>
      </Router>
    );
  }
  
  
  export default AppRouter;
  
複製程式碼

完成後，就可以再瀏覽器長檢視一下效果，可以正常顯示就說明一切正常，我們這個小案例也就算完成了。其實知識點並不多，主要是作個案例練習一下。下節課將講解一下如何動態的獲取路由地址，並進行路由配置。

P09: 後臺動態獲取路由進行配置

小案例做完了，我們對React Router也有了更加清楚的瞭解。有時候作一個後臺管理系統，選單並不是寫死的，而是通過後臺介面獲得的，這時候我們要如何根據後臺介面編寫我們的路由。這節課就模擬下後臺獲取路由配置，並編寫動態路由配置的方法。

模擬後臺得到的JSON資料

我們現在AppRouter.js檔案裡，模擬從後臺得到了JSON字串，並轉換為了物件（我們只是模擬，就不真的去遠端請求資料了）。模擬的程式碼如下:

let routeConfig =[
    {path:'/',title:'部落格首頁',exact:true,component:Index},
    {path:'/video/',title:'視訊教程',exact:false,component:Video},
    {path:'/workplace/',title:'職場技能',exact:false,component:Workplace}
]
複製程式碼

迴圈出Link區域

這時候一級導航就不能是寫死了，需要根據得到的資料進行迴圈出來。直接使用map迴圈就可以。程式碼如下：

<ul>
    {
        routeConfig.map((item,index)=>{
            return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
        })
    }
</ul>

複製程式碼

這時候就可以把所有的Link標籤都迴圈出來了。

迴圈出路由配置

按照上面的邏輯把Route的配置迴圈出來。程式碼如下:

{
    routeConfig.map((item,index)=>{
        return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
    })
}
複製程式碼

為了方便你學習，這裡給出AppRouter.js的全部程式碼。

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    let routeConfig =[
      {path:'/',title:'部落格首頁',exact:true,component:Index},
      {path:'/video/',title:'視訊教程',exact:false,component:Video},
      {path:'/workplace/',title:'職場技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一級導航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>
            
            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }
                
            </div>
          </div>
      </Router>
    );
  }
  
  
  export default AppRouter;
  
複製程式碼

到這裡就可以實現動態顯示路由了，並且可以後臺進行配置了，但是這應該都是架構層考慮的東西了。如果你剛接觸React，可能這種用法的不多。但是你可以利用這模式來設計你靜態的路由，增加你程式的擴充套件性。希望你這節課能get到這個技能，也能在工作中儘量使用這種模式。

我覺的到這裡你應該可以算是React-Router入門了，當讓React-Router還有很多用法我沒有講到，以後我會出一個例項，來講解這部分內容，希望你能持續關注部落格(jspang.com)，每週三集視訊。

相關文章