搜索文档 /

反应导航

本指南介绍了如何在使用Ionic和React构建的应用程序中工作。betway东盟体育app

IonreaceCtrouter 使用流行的 反应路由器 引擎盖下的图书馆。通过Ionbetway东盟体育appic和React Router,你可以创建具有丰富页面转换的多页面应用。

你所知道的关于使用React Router路由的一切都可以应用到Ionic React中。betway东盟体育app让我们来看看Ionic React应用程序的基础知识,以及路由如何与它一起工betway东盟体育app作。

离子反应中的路由betway东盟体育app

这是一个例子 应用程序 组件定义到“/dashboard”URL的单一路由。当你访问“/dashboard”时,该路径渲染 DashboardPage 组件。

App.tsx


              常量
             应用程序
              
             反应
              
              FC.
             
              =
             
              
              的)
             
              =>
             
              
             
              <
             IonApp
              >
             
              <
             IonreaceCtrouter
              >
             
              <
             IonRoutOutlet.
              >
             
              <
             路径
              =
              “/仪表盘”
             成分
              =
              {
             DashboardPage
              }
             
              /
              >
             
              <
             重定向的
              
              =
              “/”
             
              =
              “/仪表盘”
             
              /
              >
             
              <
              /
             IonRoutOutlet.
              >
             
              <
              /
             IonreaceCtrouter
              >
             
              <
              /
             IonApp
              >
             
              的)
              ;
复制 复制

直接之后 路线 ,我们定义了我们的默认值 重定向 ,当用户访问应用的根URL(“/”)时,它会将他们重定向到“/dashboard”URL。

重定向也有 确切的 设置,这意味着URL必须匹配 支持(或 小路 如果提案 确切的 被用于 路线 )精确地为这条路线成为匹配。没有它,这个重定向将为每条路线呈现,因为每条路线都以“/”开头。

你也可以基于一个条件从路由的渲染方法中编程重定向,比如检查一个用户是否被授权:


              <
             路由的路径
              =
              “/仪表盘”
             使成为
              =
              {
              
              道具
              的)
             
              =>
             
              {
             
              返回
             isAuthed
              
             
              <
             DashboardPage
              {
              ...
             道具
              }
             
              /
              >
             
              
             
              <
             LOGINPAGE.
              /
              >
              ;
             
              }
              }
             
              /
              >
复制 复制

IonreaceCtrouter

IonreaceCtrouter 组件包装传统的 BrowserRouter 来自React Router的组件,并设置App Up以进行路由。因此,使用 IonreaceCtrouter 代替 BrowserRouter 。你可以通过任何道具传递给 IonreaceCtrouter 它们将被传递到底层 BrowserRouter

嵌套的路线

在仪表板页面内,我们定义了与应用程序的此特定部分相关的更多路由:

DashboardPage.tsx


              常量
             DashboardPage
              
             反应
              
              FC.
             
              =
             
              
              的)
             
              =>
             
              {
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonRoutOutlet.
              >
             
              <
             路由的路径
              =
              “/仪表盘”
             成分
              =
              {
             UsersListPage
              }
             
              /
              >
             
              <
             路径
              =
              “/仪表板/用户/:ID”
             成分
              =
              {
             UserDetailPage
              }
             
              /
              >
             
              <
              /
             IonRoutOutlet.
              >
             
              <
              /
             IonPage
              >
             
              的)
              ;
             
              }
              ;
复制 复制

这里,有几个定义的路由指向应用程序的仪表板部分内的页面。注意,我们需要在路径中定义整个路线,并且即使我们从该网址到达此页面,我们也无法留下“/仪表板”。React Router需要完整路径,不支持相对路径。

然而,我们可以使用 匹配 对象 URL. 属性提供与呈现组件匹配的URL,这有助于使用嵌套路由:


              常量
             DashboardPage
              
             反应
              
              FC.
              <
             Rietecomponentprops.
              >
             
              =
             
              
               {
              匹配
               }
              的)
             
              =>
             
              {
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonRoutOutlet.
              >
             
              <
             路由的路径
              =
              {
             匹配
              
             URL.
              }
             成分
              =
              {
             UsersListPage
              }
             
              /
              >
             
              <
             路径
              =
              {
               `
                $ {
               匹配
                
               URL.
                }
               /用户/:ID
               `
              }
             成分
              =
              {
             UserDetailPage
              }
             
              /
              >
             
              <
              /
             IonRoutOutlet.
              >
             
              <
              /
             IonPage
              >
             
              的)
              ;
             
              }
              ;
复制 复制

在这里, match.url. 包含“/仪表板”的值,因为它是用于呈现的URL DashboardPage

这些路线被分组为 IonRoutOutlet. ,让我们接下来讨论。

IonRoutOutlet.

IonRoutOutlet. 组件为渲染离子“页面”的路由提供了一个容器。betway东盟体育app当页面处于 IonRoutOutlet. ,该容器在创建和销毁页面时,控制页面之间的转换动画以及控件,这有助于在它们之间后退和在它们之间切换时保持视图之间的状态。

DashboardPage 上面显示了一个用户列表页面和一个详细信息页面。当在两个页面之间导航时, IonRoutOutlet. 提供适当的平台页面转换并保持上一页的状态完整,以便当用户导航返回列表页面时,它将显示与剩余时的状态相同。

一个 IonRoutOutlet. 应该只包含 路线 s或 重定向 s.任何其他组件都应该作为一个结果进行渲染 路线 或在外面 IonRoutOutlet.

回力路线

常见的路由用例是在导航位置导航的位置提供“后退”路由,与定义的任何路由不匹配。

我们可以通过放置一个回力路线 路线 没有A的组件 小路 属性中定义的最后一个路由 IonRoutOutlet.

DashboardPage.tsx


              常量
             DashboardPage
              
             反应
              
              FC.
              <
             Rietecomponentprops.
              >
             
              =
             
              
               {
              匹配
               }
              的)
             
              =>
             
              {
             
              返回
             
              
             
              <
             IonRoutOutlet.
              >
             
              <
             路由的路径
              =
              {
             匹配
              
             URL.
              }
             成分
              =
              {
             UsersListPage
              }
             
              /
              >
             
              <
             路径
              =
              {
               `
                $ {
               匹配
                
               URL.
                }
               /用户/:ID
               `
              }
             成分
              =
              {
             UserDetailPage
              }
             
              /
              >
             
              <
             路线渲染
              =
              {
              
              的)
             
              =>
             
              <
             重定向到
              =
              {
             匹配
              
             URL.
              }
             
              /
              >
              }
             
              /
              >
             
              <
              /
             IonRoutOutlet.
              >
             
              的)
              ;
             
              }
              ;
复制 复制

这里,我们看到在事件中一个位置与前两个位置不匹配 路线 S. IonRoutOutlet. 将离子反应应用程序重定向到betway东盟体育app match.url. 路径。

您也可以提供一个组件来呈现,而不是提供一个重定向。


              常量
             DashboardPage
              
             反应
              
              FC.
              <
             Rietecomponentprops.
              >
             
              =
             
              
               {
              匹配
               }
              的)
             
              =>
             
              {
             
              返回
             
              
             
              <
             IonRoutOutlet.
              >
             
              <
             路由的路径
              =
              {
             匹配
              
             URL.
              }
             成分
              =
              {
             UsersListPage
              }
             
              /
              >
             
              <
             路径
              =
              {
               `
                $ {
               匹配
                
               URL.
                }
               /用户/:ID
               `
              }
             成分
              =
              {
             UserDetailPage
              }
             
              /
              >
             
              <
             路线组成部分
              =
              {
             NotFoundPage
              }
             
              /
              >
             
              <
              /
             IonRoutOutlet.
              >
             
              的)
              ;
             
              }
              ;
复制 复制

IonPage

IonPage 组件在离子React应用程序中包装每个视图,并允许页面转换和堆栈betway东盟体育app导航正常工作。导航到使用路由器的每个视图都必须包含一个 IonPage 组件。


              进口
             
              {
             IonContent
              
             离子主艇
              
             IonPage
              
             Iontitle.
              
             IonToolbar
              
             
              }
             
              
             
              “@betway东盟体育app离子/反应”
              ;
             
              进口
             反应
              
             
              “反应”
              ;
             
              常量
             
              
             反应
              
              FC.
             
              =
             
              
              的)
             
              =>
             
              {
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             离子主艇
              >
             
              <
             IonToolbar
              >
             
              <
             Iontitle.
              >
             
              <
              /
             Iontitle.
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             离子主艇
              >
             
              <
             IonContent类名
              =
              “离子填充”
              >
             你好,世界
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              的)
              ;
             
              }
              ;
             
              出口
             
              默认的
             
              ;
复制 复制

在Ionic React应用程序中,当路由到不同的视图时,有几个选项betway东盟体育app UsersListPage 使用 IonItem s RouterLink. 道具指定当物品被点击或点击时要去的路径:

usesslistpage.tsx.


              常量
             UsersListPage
              
             反应
              
              FC.
             
              =
             
              
              的)
             
              =>
             
              {
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             离子主艇
              >
             
              <
             IonToolbar
              >
             
              <
             Iontitle.
              >
             用户
              <
              /
             Iontitle.
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             离子主艇
              >
             
              <
             IonContent
              >
             
              <
             离子列表
              >
             
              <
             IonItem RouterLink.
              =
              “/仪表板/用户/ 1”
              >
             
              <
             Ionlabel.
              >
             用户
              1
              <
              /
             Ionlabel.
              >
             
              <
              /
             IonItem
              >
             
              <
             IonItem RouterLink.
              =
              “/仪表板/用户/ 2”
              >
             
              <
             Ionlabel.
              >
             用户
              2
              <
              /
             Ionlabel.
              >
             
              <
              /
             IonItem
              >
             
              <
              /
             离子列表
              >
             
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              的)
              ;
             
              }
              ;
复制 复制

其他具有 RouterLink. prop是 IonButton. IonCard IonRouterlink. ionfabbutton. , 和 IonItemOption.

这些组件中的每一个也有一个 RouterDirection. 道具明确地设置要使用的页面转换(“返回”,“向前”或“无”)。

在这些组件之外 RouterLink. 道具,你也可以使用React路由器 关联 组件在视图之间导航:


                <
               关联
              
               
                =
                
               /仪表板/用户/ 1
                
               >
             用户1
                
               关联
               >
复制 复制

我们建议使用上述方法之一进行路由。这些方法的优点是它们都呈现锚( )标签,这适用于整体应用的可访问性。

导航的一个编程选项是使用 历史 React Router提供给它通过路由渲染的组件的道具。


              <
             IonButton onClick
              =
              {
              
              E.
              的)
             
              =>
             
              {
             E.
              
              防止
              
              的)
              ;
             历史
              
              
              
              “/仪表板/用户/ 1”
              的)
              ;
             
              }
              }
             
              >
             去用户
              1
             
              <
              /
             IonButton.
              >
复制 复制

笔记: 历史 是一个道具。

URL参数

在Dashboard Page中定义的第二个路由定义了一个URL参数(路径中的“:id”部分)。URL参数的动态部分 小路 当用户导航到诸如“/仪表板/用户/ 1”之类的URL时,将“1”保存到名为“ID”的参数,该参数可以在路由渲染的组件中访问。让我们看看这是怎么做的。

UserDetailPage.tsx


              界面
             
              UserDetailPageProps
             
              扩展
             
              Rietecomponentprops.
              <
              {
             ID
              
             
              字符串
              ;
             
              }
              >
             
              {
              }
             
              常量
             UserDetailPage
              
             反应
              
              FC.
              <
             UserDetailPageProps
              >
             
              =
             
              
               {
              匹配
               }
              的)
             
              =>
             
              {
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             离子主艇
              >
             
              <
             IonToolbar
              >
             
              <
             Iontitle.
              >
             用户详细信息
              <
              /
             Iontitle.
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             离子主艇
              >
             
              <
             IonContent
              >
             用户
              {
             匹配
              
             参数
              
             ID
              }
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              的)
              ;
             
              }
              ;
复制 复制

匹配 prop包含匹配的路由信息,包括URL参数。我们获得 ID 参加参数并在屏幕上显示它。

注意我们是如何使用TypeScript接口来强类型输入props对象的。该接口为我们提供了组件内部的类型安全和代码补全。

生活实例

如果您更喜欢使用上面描述的概念和代码,请查看我们的 生活实例 关于StackBlitz的上面的主题。

标签视图中的IonRouterOutlet

当在标签视图中工作时,Ionic React需要一种方法来betway东盟体育app确定哪些视图属于哪些标签。我们通过利用提供给a的路径来实现这一点 路线 是正则表达式。

虽然语法看起来有点奇怪,但是一旦你理解它就相当简单。

例如,可以设置具有两个选项卡(会话和扬声器)的视图的路由:


              <
             IonRoutOutlet.
              >
             
              <
             路径
              =
              “/:选项卡(会话)”
             成分
              =
              {
             会议页面
              }
             确切的
              =
              {
              真的
              }
             
              /
              >
             
              <
             路径
              =
              /:选项卡(会话)/:id”
             成分
              =
              {
             SessionDetail
              }
             
              /
              >
             
              <
             路径
              =
              /:选项卡(扬声器)”
             成分
              =
              {
             扬声器列表
              }
             确切的
              =
              {
              真的
              }
             
              /
              >
             
              <
              /
             IonRoutOutlet.
              >
复制 复制

如果导航的URL是“/会话”,则它将匹配第一个路由并添加名为“选项卡”的URL参数,其中包含“会话”的值为生成的值 匹配 对象通过了 会议页面

当用户导航到会话详细信息页面(例如,例如)时,第二路由将名为“选项卡”的URL参数添加为“会话”的值。什么时候 IonRoutOutlet. 看到两个页面都在同一个“sessions”选项卡中,它提供了一个动画页面到新视图的过渡。如果用户导航到一个新标签(本例中为“speakers”), IonRoutOutlet. 知道不提供动画。

在IonRoutOutlet开关

IonRoutOutlet. 在确定使用a时确定渲染的路线 开关 从反应路由器使用时无效 IonRoutOutlet. 。在外部使用时,切换仍然可以按预期运行 IonRoutOutlet.

更多信息

有关使用React Router的React Rourting的更多信息,请查看其文档 https://reacreTroming.com/reacont-router/web.

来自社区的

betway东盟体育app离子4与反应:航海 ——保罗·哈利迪

以前的
生命周期
下一个
配置
Baidu