SPA俗称单页面应用。就类似于我们所看到的网站都集成于一个html文件,然后在网站交互的过程中始终保证在此页面上进行展示。页面标签不进行刷新,给用户一种未跳转的假象,但是也会面临着初次加载慢等。
单页应用程序是一种基于 Web 技术的应用程序架构模式,其中所有的页面加载、渲染和切换都在单个 HTML 页面中完成,而不需要每次切换页面时重新加载整个页面。相反,通过使用 JavaScript 和 AJAX 技术,SPA 在单个页面内动态地加载和更新内容。
在传统的多页应用程序中,每个页面对应一个独立的 HTML 文件,每次切换页面都需要从服务器重新加载整个页面。而在 SPA 中,初始加载时只需要下载一个 HTML 文件,之后的页面切换通过动态加载数据和更新页面的方式进行,大大提高了用户体验和页面加载速度。
SPA 的优点包括:
更快的用户体验:因为只需要加载一次初始页面,后续的页面切换只需要加载数据和更新部分内容,响应更迅速。
减少服务器负载:由于只需要返回数据而不是整个页面,减少了服务器端的压力和带宽消耗。
更流畅的页面切换:通过使用前端路由技术,可以实现无刷新的页面切换,提供更加流畅的用户界面。
更好的交互性:SPA 可以通过 JavaScript 操作 DOM 元素和响应用户事件,实现更丰富的交互效果。
可维护性和可扩展性:通过使用前端框架(如React、Angular、Vue等),可以将应用程序拆分为组件,提高代码的可维护性和可扩展性。
路由就类似于我们所使用的路由器,正是因为有路由的出现,才使用我们能够在单页面应用中实现不同页面的切换,因为路由中存在一组key和value的值。就无需刷新页面。
在react中我们需要引入第三方包来进行操作。这里引入的是react-router-dom@5的版本。然后我们可以根据其中提供的各种的API完成单页面的路由切换。
下列分别引入的是路由的模式,路由的链接,以及自定义激活状态的路由连接。下面是在render中渲染的html标签。
import {BrowserRouter,Link,NavLink} from 'react-router-dom'
{/* About
Home */}
{/* RouteBrowserRouterr:就是利用H5推出的history身上的API
HashRouter:就是利用#,也就是锚点 hash值
*/}
{/*NavLink在点击的时候就会去找activeClassName="ss"所指定的class的值,如果不添加默认是active
这是因为Link相当于是把标签写死了,不能去改变什么。
*/}
{/* About
Home */}
{/*将NavLink进行封装,成为MyNavLink,通过props进行传参数,标签体内容是props特殊的一个属性,叫做children */}
About
Home
{/* 注册路由,也就是写对应的关系 */}
{/* 路由可以匹配多个路径,因此可以展示多个组件,但是按道理应该只匹配一个即可,而且多个匹配会很耗费性能
Switch:就可以保证路由在匹配到第一个路径之后,就不和继续向下走。 */}
{/* exact={true}:开启严格匹配的模式,路径必须一致 */}
{/* Redirect:如果上面的都没有匹配到,就匹配到这个路径下面 */}
首先是路由模式。在react中如果我们要使用路由,那么要确保路由模式要完全包裹住link和route。这里为了方便我们可以将路由包裹在最外面的App标签中。这样无论我们在后面怎么添加路由信息。都会保证路由被包裹在路由模式中
ReactDOM.render(
,document.getElementById("root"))
然后就是Link和NavLink。其实这两种归根结底都是一样的。只是后面这种我们可以动态的修改其激活状态的样式。该函数我们需要传递to,也很好理解就是跳转到那个路由上。不过建议其跳转的path都采取小写的写法。而下面的我们可以自定义其对应的路由信息
Home
但在开发过程中我们可能所写的路由信息不止一个,可能会有很多个。因此可能对应的path可能会有重复。这时我们可以使用Switch、当然也需要从react-router-dom中引入。使用它的好处是我们可以避免匹配到合适的path时仍要往下匹配。节约了时间和效率。
然后如果我们想一启动页面就要保证页面跳转到对应的路由上,我们可以使用Redirect,来进行默认路由的跳转。启动项目后对应的path位空串,因此无法匹配到我们所写的页面的路由。所以我们给一个Redirect来进行保底。让他可以默认跳转到对应的路由上。
当然在开发过程中我们也无法避免有时会出现嵌套路由的出现。其实在实现嵌套路由的时候,我们使用了路由的模糊匹配模式。
我们可以比较一下下面代码的不同,我们可以发现在route的path和link的path也可以不一样。这里就是利用了路由的模糊匹配模式。其实模糊匹配通俗的将就是路由Route的path有啥,你的Link中也必须有啥,且要以Route的path打头才行。像如下代码才能实现跳转到home页面。
那么路由有模糊模式,也会有严格模式,在严格模式下我们所写的path就必须一摸一样才行,但是开启严格模式有时候会影响我们的开发。例如后续的二级路由等可能无法成功的显示出来。
About
Home
下面的代码是无法跳转的
About
Home
About
Home
开启严格模式下的路由
About
Home
{/* exact={true}:开启严格匹配的模式,路径必须一致 */}
React中路由传参大概有三种,分别是search、params、state。下面将分别讲解其中的传参思路
第一种传递参数params参数,在Link中我们需要用/属性的形式传递
{item.message}
我们可以在对应的链接Link中进行传递参数的操作,当然是通过/属性的形式添加到对应的url后面。然后在路由Route那进行对应参数的接口使用的是/:属性的形式。然后传递到对应页面中的props中的metch中。
this.props.match.params
我们通过search传递参数时,对应的格式为?key=value&key=value的形式来进行传递。因此我们需要在Link中将需要传递的参数按照上述格式进行书写。因此代码如下
News
这里我们安装一下query-string的包,然后就可以将传递过来的参数修改为对应的数值
// const { search } = this.props.location;
// console.log(search);
// const { id } = qs.parse(search.slice(1));
// const { name, content } = messageList.find((item) => {
// return item.id === id;
// });
我们可以在Link中不在只是写入单单的字符串,而是可以写入自定义的对象,这样就可以实现对state传递参数。
{item.message}
接受的话需要我们特别处理一下,因为state在location中默认值时underfined,因此我们在操作时就需要使用 || 来避免在underfined上 取属性。因此需要实现对应的引入hook函数,如useLocation
const {id} = this.props.location.state || {}
const { name, content } = messageList.find((item) => {
return item.id === id;
}) || {};
上述三种路由传参都是比较常用的。但是如果我们不想让其他用户知道我们路径上传递的什么参数,则我们可以使用第三种方法。如果是携带参数的话我们可以使用第一或者第二种方法。