React路由

React路由

1. 什么是路由?

• 一个路由就是一个映射关系(key:value)
• key为路径, value可能是function或component

路由分类

• 后端路由：

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

• 前端路由：

1. 浏览器端路由，value是component，用于展示页面内容。
2. 注册路由:
3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

路由安装

npm i react-router-dom@5.0 -S

react-router-dom的理解

1. react的一个插件库。
2. 专门用来实现一个SPA应用。
3. 基于react的项目基本都会用到此库。

react-router-dom相关API

内置组件

 - <BrowserRouter>
 - <HashRouter>
 - <Route>
 - <Redirect>
 - <Link>
 - <NavLink>
 - <Switch>
 - <Prompt>

BrowserRouter 浏览器路由
HashRouter 哈希路由
NavLink 导航链接

• exact精确匹配
• to 链接地址
• class="active"匹配状态

Route 路由容器

• exact精确匹配（路径和配置的path完全匹配）
• path 路由地址
• component 组件

<Redirect> 重定向

• to 去哪儿
• from 从那

<Switch>匹配一个路由

<Prompt>路由离开调用弹框

• when 当条件为真
• message 弹出文本内容

<Link>跳转

• to=“/login”

 to={{
pathname:"/login",
search:"name=mumu&age=18",
hash:"#good",
state:{redirect:"xxx"}
}}

路由的参数

path="produce/:id”
切换 to=“/produce/abc”
获取：props.match.params.id

子路由

在主路由添加
  <div>
          <Route path="/admin/dash" component={Dash}></Route>
          <Route path="/admin/orderlist" component={OrderList}></Route>
          {/* 重定向 */}
          <Redirect path="/admin" to="/admin/dash"></Redirect>
       </div>

路由props

match匹配的路由

• params路由的参数
• isExact是否精确匹配
• path路径
• url 地址

history历史记录

• push 跳转
• replace 替换历史记录
• go跳转历史记录
• goBack 返回
• goForward 前进
• linsten 监听
• location 同 location
• length 长度

location地址栏信息

• hash哈希值
• pathname地址名称
• search 查询信息
• state跳转传入数据