ReactRouter-V5免费图文视频教程（我免费，有培训机构什么事，就出！）

时间  2019-11-05
标签 reactrouter v5 免费 图文 视频 教程 培训 机构 什么事 繁體版
原文   原文链接

React-Router

最近一直有培训机构加我微信和QQ对我进行辱骂，我出免费视频，你培训机构怎么了，市场那么大，你赚钱还不许人家自愿做免费吗？我就出，每周三集免费视频教程，目标1000集。css

React Router 是一个基于React之上的强大路由库，它可让你向应用中快速地添加视图和数据流，同时保持页面与URL间的同步。这是官方的解释，虽然足以解释React Router，但我觉的还不够重视这个插件。就目前个人工做经验所知，凡是React技术栈的项目（WEB和Native），都须要用到React Router。有了它你才能够构建复杂的应用程序，有了它才能使应用有层次感。若是没有React Router，咱们智能用switch...case这样的语句，进行判断渲染，这很是的麻烦，并且不可用；可是有了React Router一切就变的简单了。html

学习这个文章以前，我默认你已经学习了前置的两篇文章，因此不少基础的内容我不会讲解。前端

  1. React16免费视频教程（共28集）
  2. Redux免费视频教程（共24集）

若是你基础尚未学习，我建议你先学习这两个视频教程，若是认证学，应该一个周末（两天）时间就能够学完，而后你再回来看这篇文章会轻松不少。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; 复制代码

到这里就能够实现动态显示路由了，而且能够后台进行配置了，可是这应该都是架构层考虑的东西了。若是你刚接触React，可能这种用法的很少。可是你能够利用这模式来设计你静态的路由，增长你程序的扩展性。但愿你这节课能get到这个技能，也能在工做中尽可能使用这种模式。

我觉的到这里你应该能够算是React-Router入门了，当让React-Router还有不少用法我没有讲到，之后我会出一个实例，来说解这部份内容，但愿你能持续关注博客(jspang.com)，每周三集视频。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程