搜索文档 /

反应导航

本指南涵盖了路由如何在一个应用程序与离子和反应构建工作。betway东盟体育app

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

你所知道的关于使用React路由器的路由的一切都将被传递到Ionic React中。betway东盟体育app让我们来看看Ionic React应用程序的基础知识,以及路由是如何使用它的betway东盟体育app。

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

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

App.tsx


              常量
             应用程序
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              =>
             
              
             
              <
             IonApp
              >
             
              <
             IonReactRouter
              >
             
              <
             IonRouterOutlet
              >
             
              <
             路由路径
              
              “/仪表盘”
             组件
              
              
             DashboardPage
              
             
              /
              >
             
              <
             重定向的
              
              
              “/”
             
              
              “/仪表盘”
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              <
              /
             IonReactRouter
              >
             
              <
              /
             IonApp
              >
             
              
              
复制 复制

后直接 路线 ,则定义默认值 重定向 ,当用户访问应用程序的根URL("/")时,它会将用户重定向到"/dashboard" URL。

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

你也可以根据一个条件从Route的渲染方法编程重定向,比如检查用户是否被验证:


              <
             路由的路径
              
              “/仪表盘”
             渲染
              
              
              
              道具
              
             
              =>
             
              
             
              返回
             isAuthed
              
             
              <
             DashboardPage
              
              ...
             道具
              
             
              /
              >
             
              
             
              <
             LoginPage
              /
              >
              
             
              
              
             
              /
              >
复制 复制

IonReactRouter

IonReactRouter 组件封装传统的 BrowserRouter 组件,并设置应用程序路由。因此,使用 IonReactRouter 在的地方 BrowserRouter .你可以把任何道具传递给 IonReactRouter 它们将被传递到底层 BrowserRouter

嵌套的路线

在Dashboard页面中,我们定义了更多与应用程序的这个特定部分相关的路由:

DashboardPage.tsx


              常量
             DashboardPage
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              =>
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonRouterOutlet
              >
             
              <
             路由的路径
              
              “/仪表盘”
             组件
              
              
             UsersListPage
              
             
              /
              >
             
              <
             路由路径
              
              “/仪表板/用户/:id”
             组件
              
              
             UserDetailPage
              
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              
复制 复制

这里定义了更多的路由,从应用的仪表板部分指向页面。注意,我们需要在路径中定义整个路由,我们不能离开"/dashboard",即使我们从那个URL到达了这个页面。React Router需要完整路径,不支持相对路径。

但是,我们可以用 匹配 对象 url 属性提供与呈现组件匹配的URL,这在处理嵌套路由时很有帮助:


              常量
             DashboardPage
              
             反应
              
              足球俱乐部
              <
             RouteComponentProps
              >
             
              
             
              
               
              匹配
               
              
             
              =>
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonRouterOutlet
              >
             
              <
             路由的路径
              
              
             匹配
              
             url
              
             组件
              
              
             UsersListPage
              
             
              /
              >
             
              <
             路由路径
              
              
               
                $ {
               匹配
                
               url
                
               /用户/:id
               
              
             组件
              
              
             UserDetailPage
              
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              
复制 复制

在这里, match.url 包含“/dashboard”的值,因为这是用于呈现 DashboardPage

这些路由分组在一个 IonRouterOutlet ,让我们接下来讨论。

IonRouterOutlet

IonRouterOutlet 组件为渲染离子“页面”的路由提供了一个容器。betway东盟体育app当页面处于 IonRouterOutlet ,容器控制页面之间的过渡动画,以及页面创建和销毁时的控制,这有助于在视图之间来回切换时维护视图之间的状态。

DashboardPage 上面显示了一个用户列表页面和一个详细信息页面。当在两个页面之间导航时, IonRouterOutlet 提供适当的平台页面转换,并保持前一个页面的状态不变,以便当用户导航回列表页面时,它显示的状态与离开时相同。

一个 IonRouterOutlet 应该只包含 路线 年代或 重定向 任何其他组件都应该作为一个结果 路线 或者在 IonRouterOutlet

撤退的路线

一个常见的路由用例是,当导航到的位置与定义的任何路由都不匹配时,提供要呈现的“回退”路由。

可以通过放置一个 路线 组件没有 路径 属性中定义的最后一条路由 IonRouterOutlet

DashboardPage.tsx


              常量
             DashboardPage
              
             反应
              
              足球俱乐部
              <
             RouteComponentProps
              >
             
              
             
              
               
              匹配
               
              
             
              =>
             
              
             
              返回
             
              
             
              <
             IonRouterOutlet
              >
             
              <
             路由的路径
              
              
             匹配
              
             url
              
             组件
              
              
             UsersListPage
              
             
              /
              >
             
              <
             路由路径
              
              
               
                $ {
               匹配
                
               url
                
               /用户/:id
               
              
             组件
              
              
             UserDetailPage
              
             
              /
              >
             
              <
             路线呈现
              
              
              
              
             
              =>
             
              <
             重定向到
              
              
             匹配
              
             url
              
             
              /
              >
              
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              
              
             
              
              
复制 复制

在这里,我们看到一个位置与前两个位置不匹配 路线 年代, IonRouterOutlet 将离子化反应应用重定向到betway东盟体育app match.url 路径。

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


              常量
             DashboardPage
              
             反应
              
              足球俱乐部
              <
             RouteComponentProps
              >
             
              
             
              
               
              匹配
               
              
             
              =>
             
              
             
              返回
             
              
             
              <
             IonRouterOutlet
              >
             
              <
             路由的路径
              
              
             匹配
              
             url
              
             组件
              
              
             UsersListPage
              
             
              /
              >
             
              <
             路由路径
              
              
               
                $ {
               匹配
                
               url
                
               /用户/:id
               
              
             组件
              
              
             UserDetailPage
              
             
              /
              >
             
              <
             路由组件
              
              
             NotFoundPage
              
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
             
              
              
             
              
              
复制 复制

IonPage

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


              进口
             
              
             IonContent
              
             IonHeader
              
             IonPage
              
             IonTitle
              
             IonToolbar
              
             
              
             
              
             
              “@betway东盟体育appionic /反应”
              
             
              进口
             反应
              
             
              “反应”
              
             
              常量
             首页
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              =>
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
             
              <
             IonToolbar
              >
             
              <
             IonTitle
              >
             首页
              <
              /
             IonTitle
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             IonHeader
              >
             
              <
             IonContent类名
              
              “ion-padding”
              >
             你好世界
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              
             
              出口
             
              默认的
             首页
              
复制 复制

当路由到离子反应应用程序中的不同视图时,有几个选项可用betway东盟体育app UsersListPage 使用 IonItem routerLink 指定点击/点击项目时要去的路径的道具:

UsersListPage.tsx


              常量
             UsersListPage
              
             反应
              
              足球俱乐部
             
              
             
              
              
             
              =>
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
             
              <
             IonToolbar
              >
             
              <
             IonTitle
              >
             用户
              <
              /
             IonTitle
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             IonHeader
              >
             
              <
             IonContent
              >
             
              <
             IonList
              >
             
              <
             IonItem routerLink
              
              “/仪表板/用户/ 1”
              >
             
              <
             IonLabel
              >
             用户
              1
              <
              /
             IonLabel
              >
             
              <
              /
             IonItem
              >
             
              <
             IonItem routerLink
              
              “/仪表板/用户/ 2”
              >
             
              <
             IonLabel
              >
             用户
              2
              <
              /
             IonLabel
              >
             
              <
              /
             IonItem
              >
             
              <
              /
             IonList
              >
             
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              
复制 复制

其他组件有 routerLink 道具是 IonButton IonCard IonRouterLink IonFabButton , IonItemOption

每个分量都有 routerDirection Prop显式设置要使用的页面转换类型(“后退”、“前进”或“无”)。

在这些组件之外 routerLink prop,你也可以使用React路由器 链接 组件在视图之间导航:


                <
               链接
              
               
                
                
               仪表板/用户/ 1
                
               >
             用户1
                
               链接
               >
复制 复制

我们建议在可能的情况下使用上述方法之一进行路由。这些方法的优点是它们都呈现一个锚( <一> )标签,它适用于整个应用程序的可访问性。

用于导航的一个编程选项是使用 历史 React Router通过路由提供给组件的prop。


              <
             IonButton onClick
              
              
              
              e
              
             
              =>
             
              
             e
              
              preventDefault
              
              
              
             历史
              
              
              
              “/仪表板/用户/ 1”
              
              
             
              
              
             
              >
             去用户
              1
             
              <
              /
             IonButton
              >
复制 复制

注意: 历史 是一个道具。

URL参数

在Dashboard Page中定义的第二个路由定义了一个URL参数(路径中的“:id”部分)。属性的动态部分 路径 ,当用户导航到一个URL,比如“/dashboard/users/1”时,“1”被保存到一个名为“id”的参数中,可以在路由呈现的组件中访问该参数。让我们看看是怎么做的。

UserDetailPage.tsx


              接口
             
              UserDetailPageProps
             
              扩展
             
              RouteComponentProps
              <
              
             id
              
             
              字符串
              
             
              
              >
             
              
              
             
              常量
             UserDetailPage
              
             反应
              
              足球俱乐部
              <
             UserDetailPageProps
              >
             
              
             
              
               
              匹配
               
              
             
              =>
             
              
             
              返回
             
              
             
              <
             IonPage
              >
             
              <
             IonHeader
              >
             
              <
             IonToolbar
              >
             
              <
             IonTitle
              >
             用户详细信息
              <
              /
             IonTitle
              >
             
              <
              /
             IonToolbar
              >
             
              <
              /
             IonHeader
              >
             
              <
             IonContent
              >
             用户
              
             匹配
              
             参数个数
              
             id
              
              <
              /
             IonContent
              >
             
              <
              /
             IonPage
              >
             
              
              
             
              
              
复制 复制

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

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

生活的例子

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

标签视图中的IonRouterOutlet

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

虽然语法看起来有点奇怪,但一旦理解了它,就会相当直观。

例如,带有两个选项卡(会话和发言者)的视图的路由可以这样设置:


              <
             IonRouterOutlet
              >
             
              <
             路由路径
              
              “/:选项卡(会话)”
             组件
              
              
             SessionsPage
              
             确切的
              
              
              真正的
              
             
              /
              >
             
              <
             路由路径
              
              /:选项卡(会话)/:id”
             组件
              
              
             SessionDetail
              
             
              /
              >
             
              <
             路由路径
              
              /:选项卡(扬声器)”
             组件
              
              
             SpeakerList
              
             确切的
              
              
              真正的
              
             
              /
              >
             
              <
              /
             IonRouterOutlet
              >
复制 复制

如果导航的URL是"/sessions",它将匹配第一个路由,并在结果中添加一个名为"tab"的URL参数,其值为"sessions" 匹配 对象传递给 SessionsPage

当用户导航到一个会话详细页面(例如“/sessions/1”)时,第二条路由会添加一个URL参数“tab”,值为“sessions”。当 IonRouterOutlet 看到两个页面在同一个“sessions”选项卡中,它提供一个动画页面过渡到新视图。如果用户导航到一个新标签(本例中为“speakers”), IonRouterOutlet 知道不提供动画。

开关在IonRouterOutlet

IonRouterOutlet 接管决定哪些路线被渲染的工作 开关 从React路由器没有效果,当使用在一个 IonRouterOutlet .当在外部使用时,开关仍然按预期工作 IonRouterOutlet

更多的信息

想了解更多关于React中使用React Router路由的信息,请查看他们的文档 https://reacttraining.com/react-router/web

来自社区的

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

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