跳到主要内容

react-router知识点总结

· 阅读需 3 分钟
Slipeda

1 相关理解​

1.1 SPA的理解​

什么是spa？英文全拼single page web application，中文单页面Web应用。

通俗的说，点击页面中的链接不会刷新页面（浏览器左上角的那个小圆环不会转），只会做页面的局部更新，那这就是个单页面web应用。比如我们用的<a></a>标签，里面加个href='https://www.zhangqiang.hk.cn/' 属性，当我们点击那个a标签，此时页面跳转了网页，左上角那个小圆圈呼溜溜的转了，那这就不是个单页面web应用。

而ajax异步请求、react-router都是可以实现spa的、

1.2 路由的理解​

1.2.1 什么是路由?​

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

1.2.2 路由分类​

后端路由：

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

前端路由：

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

react-router-dom的理解:

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

2 react-router-v5​

2.1 react-router-dom相关API​

2.1.1 内置组件​

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

2.1.2 其它​

  • history对象

  • match对象

  • withRouter函数

2.2 基本路由使用​

2.2.1 安装react-router-dom​

npm install --save react-router-dom

2.2.2 嵌套路由使用​

2.2.3 向路由组件传递参数数据​

2.2.4 多种路由跳转方式​

3 react-router-v6​

4 实例-react-router实现前端路由鉴权​

相关参考：

​ 使用React-Router实现前端路由鉴权：https://juejin.cn/post/6854573217445740557#comment