反应导航
本指南介绍了如何在使用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与反应:航海 ——保罗·哈利迪
