react路由（一）携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，这篇文章主要写了我对re

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

SPA

定义：单页Web应用

整个应用只有一个完整的页面
点击其中链接将不会刷新页面，只会做页面的局部刷新
数据都需要通过Ajax请求，并在前端异步展现

路由的理解

什么是路由

一个路由是一个映射关系（key.value）
key是路径，value是function或component

路由分类

后端路由（）与前端路由
前端路由 value是comonent,用于处理客户端的请求

注册路由：
工作过程：当浏览器的path变为"/test"时，当前路由组件就会变为Test组件

react-router-dom的理解

react的一个插件库
专门用来实现SPA应用
基于react的项目都会用到此库

路由使用

安装插件库
import {Link,Route，...} from 'react-router-dom'

1.明确界面的导航区与展示区

2.导航区a标签改为Link标签
<Link to="/xxxx"></Link>
3.展示区写Route标签进行路径匹配
<Route path="/xxxxx" component={组件}/>
4最外侧包裹
<BrowserRouter></BrowserRouter>或<HashRouter></HashRouter>

组件分类

路由组件与一般组件
1.写法不同
2.存放位置不同
3.接收到的props不同

下面是路由组件的props中的重点部分

1.  history:
    
        1.  go: ƒ go(n)
        1.  goBack: ƒ goBack()
        1.  goForward: ƒ goForward()
        1.  push: ƒ push(path, state)
        1.  replace: ƒ replace(path, state)    
2.  location:
        1.  pathname: "/Home"
        1.  search: ""
        1.  state: undefined   
3.  match:

        1.  params: {}
        1.  path: "/Home"
        1.  url: "/Home"

路由组件

如果页面导航比较多的话可以直接将其封装为一个普通组件

Switch

当页面较多时Switch可以让匹配路径匹配到之后不再继续往下进行

解决样式丢失问题

1.引入样式时去掉'.' 2.引入样式时用%PUBLIC_URL% 3.用HashRouter

路由的模糊匹配与严格匹配

如图to中路径要包含path中路径

1.默认为模糊匹配。从第一个开始，第一个必须匹配上，后续无需再管，称作模糊匹配
2.完全对应为精准匹配 exact:{true}开启精准匹配

react路由（一）

SPA