React 初探(六)- React router

概述

当可以写组件了之后,需要进行一些页面的跳转,那么就需要路由,所以就需要了解一下与 React 相匹配的路由 react router

路由( routing )

概念

路由( routing ) 就是通过互联的网络把信息从源地址传输到目的地地址的活动。路由就是把一个地方的信息传输到它想去的目的地的过程。对于前端来说,路由就是将用户引向不同的页面的过程。

demo

首先写一个简单的demo,当点击 登录 按钮的时候显示登录界面,当点击 注册 的时候显示注册界面。当我将 URL 分享出去的时候,我想让别人直接进入注册界面,但是目前的代码是不能实现这个的,所以需要路由,即让一个用户去他想去的目的地。

浏览器中的 JS 代码如何改变是不会体现到地址栏的,所以在分享的时候分享的是初始状态。所以只要改变 URL,就可以去不同的界面

hash 实现路由

浏览器提供了一种方式 -> hash,当用户点击注册的时候改变 URL 的 hash。demo 添加 hash 功能。当点击 注册 按钮之后,将 URL 分享给他人,便可以直接进入注册页面。所以可以通过不同的界面对应不同的字符串就可以做到路由

history.pushState 实现路由

使用 hash 的时候会有 #,那能否可以使用 /login | /signup 这种路由呢?这时需要使用 H5 API history.pushState()
前提:如果要使用 history.pushState() 实现路由必须让后端将所有路径都指向首页
demo 使用 history.pushState() 实现路由

上述 demo 增加一个路由,可以看到仅仅增加一个路由,却要增加很多代码。但是实际情况中会有很多路由,并且有时候路由不是确定的,即无限个。例如 /users/1 访问第一个用户的信息,/users/2 访问第二个用户的信息,所以这时路由数量是不确定的。

React router

react router 就可以解决上述 demo 的不足,通过 react router 官网的例子进行更改 demo,将 demo 加入 react router

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容