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