react路由与项目实践|青训营笔记

88 阅读2分钟

一:什么是路由?

路由(router)是一种负责寻径的网络设备,它在互连网络中从多条路径中寻找通讯量最少的一条网络路径提供给用户通信。路由用于连接多个逻辑上分开的网络。对用户提供最佳的通信路径。

总的来说: 路由是桥梁,帮助需求方找到供给方,并进行交换

路由: 在前端发展的过程里,扮演的此处的provider角色的节点也在不断的变化。

静态网站-> 动态网站 -> 前后端分离 ->单页应用 ->SSR/SSG/微前端

react-router 的一些包:

Router的组件API

react-router最主要的API是给我们提供的一些组件:

  • BrowserRouter或HashRouter
  • Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件;
  • BrowserRouter使用history模式;

二:Router的映射配置

Routes:包裹所有的Route,在其中匹配一个路由

注意!

  • Router6.x使用的是Routes组件

  • Router5.x使用的是Switch组件

Route:Route是用来用于路径的匹配;

  • Router6.x不允许Router组件单独存在

  • path属性: 用于设置匹配到的路径;

  • element属性: 设置匹配到路径后,渲染的组件;

  • Router5.x使用的是component属性

  • exact: 精准匹配,只有精准匹配到完全一致的路径,才会渲染对应的组件;

  • Router6.x不再支持该属性

三:Router配置和跳转

一: NavLink组件

需求:路径选中时,对应的a元素的文字变为红色

要使用NavLink组件来替代Link组件, NavLink组件选中时, 有添加一个类(非重点!!)

事实上在默认匹配成功时,NavLink就会动态的添加上一个class: active , 选中的时候就会添加;

所以我们也可以直接编写样式

四: Navigate组件是干什么的?

Navigate用于路由的重定向,当这个组件出现时,就会执行跳转到对应的to路径中:

比如说: 一个经典案例

用户跳转到Profile界面;

但是在Profile界面有一个isLogin用于记录用户是否登录:

  • true: 表示已登录, 跳转到首页;
  • false: 表示未登录, 显式登录按钮;