React从入门到项目--第五天（React-router的应用）

SPA应用

基于React和Vue的项目都有一个共同的特点，整个项目是一个SPA应用，什么意思呢？就是说整个项目属于一个单页面应用程序，整个项目之一个完整的页面，而所见的页面的更新，只是通过路由进行的页面的局部组件替换，与真正的a链接页面跳转存在本质上的区别，它不是跳转只是更新而已。在页面转换之间，也不会向服务器发送相关的请求，所进行的数据的更新是通过额外的ajax请求去实现的。

路由的理解

什么是路由

什么是路由呢？其实一个路由就是一个映射关系（key-value），就好比在NodeJs中学到的router.get(path，(req,res)=>{函数体})，其实就是在注册路由，跟path与他的回调函数一样一一对应，而在react-router中，指的就是path与其对应组件之间的对应关系，在相应的进行匹配的时候，会在页面显示相应的组件。

路由分类

路由可以分为后台（如NodeJs服务端路由）和前台路由（浏览器路由）。后台路由用来响应客户端的请求返回一个响应数据，它的key-value中的value是响应函数，前台的路由是请求路由path的时候，响应相关的组件展示，在它的key-value对应关系中的value指的是组件对象。

前端路由实现方式

前端的路由实现方式是通过history来实现的，通过用户对路由连接的点击，直接操作了history对象，进而阻止了a链接的跳转，并将点击的信息告诉了react-router，最后交由react-router进行处理。

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相关组件

 <BrowserRouter> 和<HashRouter>：通过两种不同的方式对项目进行管理 

 <Route> 路由组件的容器，进行匹配路由展示相关组件：<Route path="/about" component={About} />

<Redirect> 跳转到相应的路由连接

<Link> <NavLink>渲染时转换为a，是跳转用的链接组件

<Switch>可切换的路由组件，进行切换的包装，只能显示一个路由组件

路由实现

1、在index中对app进行整体的管理

import React from 'react'
import {render} from 'react-dom'
import App from './component/app'
import {BrowserRouter} from 'react-router-dom'

render(
    (
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    ),
    document.getElementById('root')
);

2、在App中写两个路由链接，和两个匹配路由,默认显示/about

<div>
    <NavLink className="list-group-item" to="/about">about</NavLink>
    <NavLink className="list-group-item" to="/home">home</NavLink>
</div>

<div>
    <Switch>
        <Route path="/about" component={About} />
        <Route path="/home" component={Home} />
        <Redirect  to="/about" />
    </Switch>
</div>

3、写出路由组件

import React, {Component} from 'react'
export default class About extends Component {
    render() {
        return (
            <div>
                <p className="hello">About组件</p>
            </div>
        )
    }
}


import React, {Component} from 'react'
export default class Home extends Component {
    render() {
        return (
            <div>
                <p className="hello">Home组件</p>
            </div>
        )
    }
}

这样简单的实现了一个React-router的路由。