数据库服务器_云服务器供应商_Web云服务器租用_云数据库

小编：DR:React Router 4是一个导航组件，在React应用程序中提供声明性路由。在本教程中，您将通过实际示例学习如何使用React Router 4。路由在几乎每个应用程序的体系结构中都是最重要的。你

反应React路由器4：实用介绍通过实例介绍React路由器4。

DR:React Router 4是一个导航组件，在React应用程序中提供声明性路由。在本教程中，您将通过实际示例学习如何使用React Router 4。路由在几乎每个应用程序的体系结构中都是最重要的。你的应用程序越大，你的路由功能就越复杂，从简单到深入嵌套的路由场景。React Router是React应用程序中最流行和最常用的路由库。随着应用程序的增长，需要多个视图和路由，因此最好选择一个好的路由器来帮助管理视图之间的转换、重定向、轻松获取URL参数等。"React Router是React应用程序中最流行和最常用的路由库。"在推特上留言在此之前，以前版本的React Router需要预先声明应用程序的路由，在呈现之前声明文件中的所有路由作为应用程序初始化的一部分。使用React Router 4，可以声明性地路由。React Router 4的API基本上只是组件，因此如果您已经在React中组合组件，那么它就很容易使用。我们跳进去吧！设置和安装您需要：节点.js（版本6.0或更高版本）和npm。创建react应用程序以引导新项目。React Router由以下包组成：React Router、React Router dom和React Router native。react路由器：由核心路由组件组成。react router dom：由浏览器所需的路由API组成。react router native：包含用于移动应用程序的路由API。使用Create_react_app创建一个新项目，然后导航到创建的目录，如下所示：创建react应用程序bosecd波色安装react router dom。npm install—保存react router dom我们要介绍的内容我们将重点介绍如何将React Router 4用于浏览器。我们将介绍下列非常重要的概念：基本路由嵌套路由和URL参数路由保护和身份验证链接组件自定义处理不存在的路由边栏呈现基本路由您可以在React web应用程序中使用两种类型的路由器组件。浏览器路由器和哈希路由器。前者提供一个不带#的URL，后者给您一个带有#的URL。注意：如果您正在构建一个支持传统浏览器的web应用程序，建议您使用HashRouter。打开你的src/索引.js并添加以下代码：从"React"导入React；从"react-dom"导入ReactDOM；从"react Router dom"导入{BrowserRouter as Router，Route，Link}；导入'/索引.css';从"./App"导入应用程序；从'./registerServiceWorker'导入registerServiceWorker；ReactDOM.render(，文档.getElementById（‘根’）；registerServiceWorker（）；在上面的代码中，我从react router dom导入了BrowserRouter、Route和Link组件。我将组件与Router（BrowserRouter的别名）包装在一起。路由器组件是成功路由的第一步。它充当每个其他路由组件的容器。此外，路由器组件只能有一个子元素或组件。现在，我们如何定义我们的路线？打开src/应用程序js. 在这里，我们将定义我们的路线。导入React，{Component}来自'React'；从"react router dom"导入{Route，Link}；导入'/应用程序.css';const Home=（）=>(

家

);康斯特机场=（）=>(

乔莫·肯雅塔

坦博

穆塔拉·穆罕默德

);const城市=（）=>(

旧金山

伊斯坦布尔

东京

);类应用程序扩展组件{渲染（）{返回(

主页

机场

城市

);}}导出默认应用程序；在上面的代码中，我们有一些链接，这些链接应该使用组件将用户定向到/、/机场和城市。这些链接中的每一个都有一个组件，一旦当前位置与路由的路径匹配，就应该呈现该组件。不过，这里有点不对劲。让我们检查一下结果。机场航线Home是Home组件的UI，只应在/根路径上呈现。但是，它将在所有路线上渲染。/matches/airports和/cities路由，因此在这两个其他路由中呈现其组件。解决方法是简单地将精确的道具添加到/route。src公司/应用程序js机场路由没有呈现Home组件UI在上面的例子中，所有组件都有一个组件属性，当访问的URL与路由的路径匹配时，它会呈现组件。如果你只想呈现一个小函数而不是一个完整的组件呢？可以使用下面代码中显示的渲染属性。（

这是机场路线

）}/>嵌套路由和URL参数如果您需要/courses/business和/courses/technology/这样的URL怎么办？你将如何实现这一目标？src公司/应用程序js导入React，{Component}来自'React'；从"react router dom"导入{Route，Link}；导入'/应用程序.css';const Courses=（{match}）=>(

技术

商务

经济学

（

这是技术

）}/>（

这是业务

）}/>（

这是经济学

）}/>

);/*Home Component*///代码隐藏/*城市组件*///代码隐藏类应用程序扩展组件{渲染（）{返回(

主页

课程

城市

);}}导出默认应用程序；如果URL位置与/courses路径匹配，那么技术、商业和经济链接将通过courses组件呈现。更进一步，如果URL位置与/courses/technology、/courses/business和/courses/economics路径匹配，则分别呈现这是technology、This is business和This is economics。作为一个开发人员，我确信您已经用一系列重构的眼光来看待这种方法。在上面的代码示例中，有很多重复和硬编码。代码行越多，更改路由就越困难。让我们重构。React Router 4附带一个匹配API。匹配对象是在路由器的路径和URL位置成功匹配时创建的。match对象有一些属性，但我将概述一下您应该立即了解的属性：匹配.url：返回显示URL位置的字符串。用于s匹配路径：返回显示路由路径的字符串。用于s匹配参数：返回从URL解析的值的对象。让我们一步一步地重构。重构Courses组件以获得匹配对象，如下所示：const Courses=（{match}）=>(

技术

业务

经济学

（

这是技术

）}/>（

这是业务

）}/>（

这是经济学

）}/>

);测试你的网址是否有效。现在对路线做同样的处理，但是匹配路径.const Courses=（{match}）=>(

技术