React中的路由

这篇具有很好参考价值的文章主要介绍了React中的路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.什么是SPA

        SPA俗称单页面应用。就类似于我们所看到的网站都集成于一个html文件,然后在网站交互的过程中始终保证在此页面上进行展示。页面标签不进行刷新,给用户一种未跳转的假象,但是也会面临着初次加载慢等。

        单页应用程序是一种基于 Web 技术的应用程序架构模式,其中所有的页面加载、渲染和切换都在单个 HTML 页面中完成,而不需要每次切换页面时重新加载整个页面。相反,通过使用 JavaScript 和 AJAX 技术,SPA 在单个页面内动态地加载和更新内容。

        在传统的多页应用程序中,每个页面对应一个独立的 HTML 文件,每次切换页面都需要从服务器重新加载整个页面。而在 SPA 中,初始加载时只需要下载一个 HTML 文件,之后的页面切换通过动态加载数据和更新页面的方式进行,大大提高了用户体验和页面加载速度。

SPA 的优点包括:

  1. 更快的用户体验:因为只需要加载一次初始页面,后续的页面切换只需要加载数据和更新部分内容,响应更迅速。

  2. 减少服务器负载:由于只需要返回数据而不是整个页面,减少了服务器端的压力和带宽消耗。

  3. 更流畅的页面切换:通过使用前端路由技术,可以实现无刷新的页面切换,提供更加流畅的用户界面。

  4. 更好的交互性:SPA 可以通过 JavaScript 操作 DOM 元素和响应用户事件,实现更丰富的交互效果。

  5. 可维护性和可扩展性:通过使用前端框架(如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;

}) || {};

5.4总结 

        上述三种路由传参都是比较常用的。但是如果我们不想让其他用户知道我们路径上传递的什么参数,则我们可以使用第三种方法。如果是携带参数的话我们可以使用第一或者第二种方法。文章来源地址https://www.toymoban.com/news/detail-555695.html

到了这里,关于React中的路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端框架 Nextjs React 部署

    目录 一、node环境部署 二、静态导出 补充:路由问题 Nextjs打包还是非常方便的,就是网上资料不太全,导致踩了一些坑,下面是我亲自实践的两种打包方式。 一、node环境部署 这种方式最简单,也比较不容易出错,但部署时服务器需安装有node环境,速度没话说,杠杠的! 构

    2024年02月12日
    浏览(42)
  • React中的路由

            SPA俗称单页面应用。就类似于我们所看到的网站都集成于一个html文件,然后在网站交互的过程中始终保证在此页面上进行展示。页面标签不进行刷新,给用户一种未跳转的假象,但是也会面临着初次加载慢等。         单页应用程序是一种基于 Web 技术的应用程

    2024年02月15日
    浏览(32)
  • Vue 和 React 前端框架的比较

    本文研究了流行的前端框架 Vue 和 React 之间的区别。通过对它们的学习曲线、视图层处理方式、组件化开发、响应式数据处理方式和生态系统及社区支持进行比较分析,得出了它们在不同方面的优劣和特点。该研究对于开发者在选择合适的前端框架时提供参考。 Vue 是一款由

    2024年02月13日
    浏览(63)
  • React与Vue:前端框架的比较

    在前端开发领域,React和Vue是两个备受瞩目的框架。它们都提供了构建用户界面的强大工具,但它们在实现方式、性能和设计理念上存在一些关键差异。本文将深入探讨这两个框架之间的主要区别。 首先,让我们从数据流的角度来看。在Vue中,数据流是双向的,这意味着组件

    2024年01月20日
    浏览(45)
  • 前端(七)——React框架的定位与应用场景解析

    😊博主:小猫娃来啦 😊文章核心: React框架的定位与应用场景解析 什么是react? React 是一个由 Facebook 开发的开源 JavaScript库,用于构建用户界面。 于2013年首次发布,并迅速成为前端开发中最受欢迎的框架之一。 在 React 诞生之前,前端开发面临着许多挑战,包括复杂的D

    2024年02月17日
    浏览(42)
  • 前端react入门day02-React中的事件绑定与组件

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 React中的事件绑定 React 基础事件绑定 使用事件对象参数  传递自定义参数  同时传递事件对象和自定义参数  React中的组件  组件是什么 React组件 useState  修改状态的规

    2024年02月06日
    浏览(85)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(56)
  • 【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

    利用 useNavigate 封装一个 withRouter(hoc/with_router.js) 添加到hoc/index.js文件中 利用withRouter,拦截Home组件,实现手动跳转路由 路由参数传递包括:1.动态路由传参;2.查询字符串传参 改造withRouter,通过 useParams() 和 useSearchParams() 来接收两种参数传递: 在界面中,通过params来接收

    2024年02月14日
    浏览(50)
  • React与Vue性能对比:两大前端框架的性能

    React和Vue是当今最流行的两个前端框架,它们在性能方面都有着出色的表现。 React的加载速度: 初次加载:由于React使用了虚拟DOM(Virtual DOM)技术,它可以通过比较虚拟DOM树与实际DOM树的差异来进行高效的重绘。这使得React在初次加载时相对较快,因为它只会更新需要修改的

    2024年02月03日
    浏览(51)
  • 前端开发框架生命周期详解:Vue、React和Angular

    作为前端开发者,掌握前端开发框架的生命周期是非常重要的。在现代Web应用开发中,Vue.js、React和Angular是三个最流行的前端开发框架。本篇博客将详细解读这三个框架的生命周期,包括每个阶段的含义、用途以及如何最大限度地利用它们。通过详细的代码示例和实用的技巧

    2024年02月13日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包