React技术栈-React路由插件之react-router的基本使用

　　　　　　　　　　React技术栈-React路由插件之react-router的基本使用

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.React路由插件react-router概述

1>.什么是react-router

　　react-router是react的一个插件库,说白了它只能被react使用。

　　专门用来实现一个SPA应用

　　基于react的项目基本都会用到此库

　　官方文档:
　　　　https://reacttraining.com/react-router/web/guides/quick-start

2>.什么是SPA

　　单页Web应用（single page web application，简称SPA）

　　整个应用只有一个完整的页面

　　点击页面中的链接不会刷新页面, 本身也不会向服务器发请求

　　当点击路由链接时, 只会做页面的局部更新

　　数据都需要通过ajax请求获取, 并在前端异步展现

3>.路由的相关概念

　　什么是路由?
　　　　一个路由就是一个映射关系(key:value)
　　　　key为路由路径, value可能是function/component

　　路由分类
　　　　后端路由: 
　　　　　　node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
　　　　前台路由: 
　　　　　　浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件 

　　后端路由
　　　　注册路由: router.get(path, function(req, res))
　　　　当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
　　
　　前端路由
　　　　注册路由: <Route path="/about" component={About}>
　　　　当浏览器的hash变为#about时, 当前路由组件就会变为About组件

4>.前端路由的实现(react-router底层就是基于history库来实现了，严格来说react-router是对history的封装方便咱们前端开发程序员使用)

　　history库
　　　　网址: https://github.com/ReactTraining/history
　　　　管理浏览器会话历史(history)的工具库
　　　　包装的是原生BOM(全称Browser Object Model,是指浏览器对象模型)中window.history和window.location.hash

　　history API
　　　　History.createBrowserHistory(): 
　　　　　　得到封装window.history的管理对象
　　　　History.createHashHistory(): 
　　　　　　得到封装window.location.hash的管理对象
　　　　history.push(): 
　　　　　　添加一个新的历史记录
　　　　history.replace(): 
　　　　　　用一个新的历史记录替换当前的记录
　　　　history.goBack(): 
　　　　　　回退到上一个历史记录
　　　　history.goForword(): 
　　　　　　前进到下一个历史记录
　　　　history.listen(function(location){}): 
　　　　　　监视历史记录的变化

二.react-router相关API

1>.组件

　　<BrowserRouter>
　　　　属于路由器组件标签，不带"#"符号，是基于H5的标准语法是实现，我们也可以称之为较新的标签，路由标签我更倾向使用该标签。

　　<HashRouter>
　　　　也属于路由器组件标签,带有"#"符号，时基于H5之前的语法实现，相对上面路由器组件标签较老，我称之为较老的标签。
 
　　<Route>:
　　　　路由标签。

　　<Redirect>
　　　　重定向标签。

　　<Link>
　　　　路由链接标签。

　　<NavLink>
　　　　导航路由链接标签。

　　<Switch>
　　　　交换/切换标签，它里面开源包含多个路由("<Route>")标签。

2>.其它

　　history对象
　　　　
　　match对象
　　　　
　　withRouter函数

三.react-router基本使用实战案例

1>.使用npm命令安装react-router组件

C:UsersyinzhengjieWebstormProjectsmywebmy-react> npm install --save react-router-dom

2>.代码内容

　　如下图所示，处理app.jsx文件内容不一样外，其它的文件内容和我的整理的笔记一样，可参考:https://www.cnblogs.com/yinzhengjie/p/12159074.html

import React,{Component} from 'react';
import {NavLink,Switch,Route,Redirect} from "react-router-dom";

import About from '../views/about'
import Home from '../views/home'
import Python from '../views/python'
import Java from '../views/java'
import Golang from '../views/golang'
import Linux from '../views/linux'
import MyNavLink from './MyNavLink'

export default class App extends Component{
        render(){
            return (
                <div>
                    <div className="row">
                        <div className="col-xs-offset-2 col-xs-8">
                            <div className="page-header">
                                <h2>React Router Demo</h2>
                            </div>
                        </div>
                    </div>

                    <div className="row">
                        <div className="col-xs-2 col-xs-offset-2">
                            <div className="list-group">
                                {/*导航路由链接,官方文档:https://reacttraining.com/react-router/web/api/NavLink*/}
                                <NavLink className="list-group-item" to='/about'>About</NavLink>
                                {/*注意哟,这里的"/home"路由使用的是咱们自己自定义的导航路由链接哟~因为此处我给它定义了特定的样式。*/}
                                <MyNavLink className="list-group-item" to='/home'>Home</MyNavLink>
                                <NavLink className="list-group-item" to='/python'>python数据分析工程师</NavLink>
                                <NavLink className="list-group-item" to='/java'>java大数据开发工程师</NavLink>
                                <NavLink className="list-group-item" to='/golang'>golang自动化运维工程师</NavLink>
                                <NavLink className="list-group-item" to='/linux'>Linux云计算工程师</NavLink>
                        </div>
                        </div>
                        <div className="col-xs-6">
                            <div className="panel">
                                <div className="panel-body">
                                    {/*可切换的路由组件*/}
                                    <switch>
                                        <Route path='/about' component={About}/>
                                        <Route path='/home' component={Home}/>
                                        <Route path='/python' component={Python}/>
                                        <Route path='/java' component={Java}/>
                                        <Route path='/golang' component={Golang}/>
                                        <Route path='/linux' component={Linux}/>
                                        {/*指定打开页面默认打开的组件*/}
                                        <Redirect to='/home'/>
                                    </switch>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            )
        }
}

app.jsx文件内容

3>.启动脚手架

C:UsersyinzhengjieWebstormProjectsmywebmy-react> npm start