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

時間 2019-11-05

標籤 reactrouter v5 免費圖文視頻教程培訓機構什麼事简体版

原文原文鏈接

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

React Router 是一個基於React之上的強大路由庫，它可讓你嚮應用中快速地添加視圖和數據流，同時保持頁面與URL間的同步。這是官方的解釋，雖然足以解釋React Router，但我覺的還不夠重視這個插件。就目前個人工做經驗所知，凡是React技術棧的項目（WEB和Native），都須要用到React Router。有了它你才能夠構建複雜的應用程序，有了它才能使應用有層次感。若是沒有React Router，咱們智能用switch...case這樣的語句，進行判斷渲染，這很是的麻煩，並且不可用；可是有了React Router一切就變的簡單了。html

學習這個文章以前，我默認你已經學習了前置的兩篇文章，因此不少基礎的內容我不會講解。前端

若是你基礎尚未學習，我建議你先學習這兩個視頻教程，若是認證學，應該一個週末（兩天）時間就能夠學完，而後你再回來看這篇文章會輕鬆不少。vue

若是你正好在學習React，你能夠加入QQ羣:159579268，和小夥伴們一塊兒討論。react

P00: React Router 視頻合集列表

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

02.像製做普通網頁同樣使用ReactRouternpm

03.ReactRouter動態傳值-1編程

04.ReactRouter動態傳值-2json

05.ReactRouter重定向-Redirect使用redux

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; 複製代碼