最近一直有培訓機構加我微信和QQ對我進行辱罵，我出免費視訊，你培訓機構怎麼了，市場那麼大，你賺錢還不準人家自願作免費嗎？我就出，每週三集免費視訊教程，目標1000集。
React Router 是一個基於React之上的強大路由庫，它可以讓你嚮應用中快速地新增檢視和資料流，同時保持頁面與URL間的同步。這是官方的解釋，雖然足以解釋React Router，但我覺的還不夠重視這個外掛。就目前我的工作經驗所知，凡是React技術棧的專案（WEB和Native），都需要用到React Router。有了它你才可以構建複雜的應用程式，有了它才能使應用有層次感。如果沒有React Router，我們智慧用switch...case這樣的語句，進行判斷渲染，這非常的麻煩，而且不可用；但是有了React Router一切就變的簡單了。
學習這個文章之前，我預設你已經學習了前置的兩篇文章，所以很多基礎的內容我不會講解。
如果你基礎還沒有學習，我建議你先學習這兩個視訊教程，如果認證學，應該一個週末（兩天）時間就可以學完，然後你再回來看這篇文章會輕鬆很多。
如果你正好在學習React，你可以加入QQ群:159579268，和小夥伴們一起討論。
P00: React Router 視訊合集列表
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)，每週三集視訊。