React Router5

简介

React Router 是一个用于处理 React 应用中的路由的强大库。它允许你在应用中定义多个路由，并无缝地管理不同视图之间的导航。React Router v5 是其中的一个版本，较之前的版本引入了多个特性和改进

React-Router 有三个版本，分别是：WEB、NATIVE、CORE

SPA概念

单页Web应用(single page web application，SPA)。整个应用只有一个完整的页面。
点击页面中的链接不会刷新页面，只会做页面的局部更新。
数据都需要通过ajax请求获取,并在前端异步展现

路由

定义应用中的路径以及访问这些路径时应该渲染的组件,一个路由其实就是一个映射关系（k:v）
key为路径，value可能是function 或者是 component

后端路由：
value是function，用来处理客户端提交的请求
注册路由：router.get(path,function(req,res))
工作过程：当node接收一个请求的时候，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回响应的数据

前端路由：
浏览器端路由，value是Component，用于展示页面内容
注册路由：< Route path=“/test” component={Test}>
工作过程：当浏览器的path变为/test的时候，当前路由组件就会变成Test组件

前端路由的原理
这个主要是依靠于history，也就是浏览器的历史记录。
浏览器上的记录其实就是一个栈，前进一次就是入栈，后退一次就是出栈。
并且历史记录上有一个监听的方法，可以时时刻刻监听记录的变化。从而判断是否改变路径

React Router5 安装

学习 React-Router5 需要安装 React 提供的第三方库：react-router-dom

 npm install --save react-router-dom@5

 基本使用-Link组件

路由的使用步骤

1.在组件中导入对应路由链接组件，并设置路由链接

2.在组件中导入 Route 渲染组件，注册路由

3.在 index.js 中导入路由组件，在 <App> 的最外侧包裹一个 <BrowserRouter> 或 <HashRouter>

• <BrowserRouter> 表示 history 模式的路由
• <HashRouter> 表示 Hash 模式的路由 

基本的使用

1. 导航中的a标签改写成Link标签
2.< Link to=“/路径” >xxx< /Link>
3.展示区写Route标签进行路径的匹配
4.< Route path = ‘/路径’ component={组件名称}>
5.< App>最外侧包裹了一个< BrowserRouter>或者< HashRouter>

<div className="list-group">
      <Link className="list-group-item" to="/about">About</Link>
      <Link className="list-group-item" to="/home">Home</Link>
</div>
<div className="panel-body">
      {/* 注册路由，也就是写对应的关系 */}
      <Route path="/about" component="{About}" />
      <Route path="/home" component="{Home}" />
</div>

 index.js:

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
document.getElementById("root"))

 那么使用Link代替a标签之后，在页面上会是什么呢，我们发现其实页面上也是把link转化为了a标签

路由组件以及一般组件

1.写法不一样
一般组件：< Demo>
路由组件：< Route path=“/demo” component ={Demo}/>
2.存放的位置一般不同
一般组件：components
路由组件：pages
3.接收的内容【props】
一般组件：写组件标签的时候传递什么，就能收到什么
路由组件：接收到三个固定的属性【history,location,match】 

history:
    go: ƒ go(n)
    goBack: ƒ goBack()
    goForward: ƒ goForward()
    push: ƒ push(path, state)
    replace: ƒ replace(path, state)
location:
    pathname: "/about"
    search: ""
    state: undefined

match:
    params: {}
    path: "/about"
    url: "/about"