ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

React Router 版本 6 路由配置差异

2023-07-07 16:27:57  阅读:150  来源: 互联网

标签:React Router JavaScript 终端


“React Router 是一个 JavaScript 框架,可让我们处理 React 应用程序中的客户端和服务器端路由”。换句话说,React Router 用于在应用程序中定义多个路由。当用户在浏览器中键入特定的 URL 时,如果该 URL 路径与路由器文件中的任何“路由”匹配,则用户将被重定向到该特定路由。

安装

现在我们已经大致定义了 React Router,接下来我们来谈谈如何安装它。安装过程相当简单。首先,打开终端并使用以下命令创建应用程序:

npx create-react-app my-app
cd my-app
npm start
创建 React 应用程序后,导航到根文件夹并运行:

npm 安装react-router-dom@6
<开关> VS <路线>

在 React Router 版本 5 中,路由配置是通过使用 <switch> 元素完成的。switch 元素检查其子路由并显示与当前 URL 相对应的第一个路由。在大多数场景和应用程序中,该组件是理想的,因为它允许应用程序内有多个路由和多个页面,但确保在任何给定时刻只有一个页面可见。

<开关>
 <精确从= "/"重定向 到= "/home" />  
<路由 路径= "/about" >
<关于/>
</路由>
<路由 路径= "/users" >
<用户/>
< /路线>
<路线 路径= "/home" >
<首页/>
</路线> <ai=49></切换>
在 React-Router V6 中,<Switch> 组件不再可用。相反,我们利用 <Routes> 包装器来配置路由。每个路由都是使用 <Route> 组件定义的,其中路径和组件作为元素传递,如下所示:

<路由>
<路由 路径= "/" 元素= { < Home /> } />
<路由 路径= "about" 元素= { < About /> } />
<路由 路径= "users" 元素= { < Users / > } />
</路线>

标签:React Router,JavaScript,终端
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有