- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我无法让标签导航正常工作。
这是我目前的代码:
App.tsx:
const App: React.FC = () =>
<IonApp>
<IonReactRouter>
<IonRouterOutlet id="main">
<Route exact path="/" render={() => <Redirect to="/home"/>}/>
<Route path="/home" render={(props) => <Home {...props}/>} exact={true}/>
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
)
Home.tsx:
const Home: React.FC<RouteComponentProps> = (props: RouteComponentProps) => (
<IonPage>
<IonTabs>
<IonRouterOutlet id='tabs'>
<Route path='/:tab(myDecks)' render={(props) => <MyDecks {...props} />} exact/>
<Route path='/:tab(explore)' render={(props) => <Explore {...props} />} exact/>
<Redirect from='/home' to='/myDecks'/>
</IonRouterOutlet>
<IonTabBar slot='bottom'>
<IonTabButton tab='myDecks' href='/myDecks'>
<IonLabel>My Decks</IonLabel>
</IonTabButton>
<IonTabButton tab='explore' href='/explore'>
<IonLabel>Explore</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
);
MyDecks.tsx:
const MyDecks: React.FunctionComponent<RouteComponentProps> = (props: RouteComponentProps) => {
return <>
<IonHeader>
<IonToolbar>
<IonTitle>My Decks</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent className='ion-padding'>
My Decks
</IonContent>
</>
};
当前行为是:
如果我改变 <IonRouterOutlet>
内部的路由顺序,那么最初选择的是“我的甲板”选项卡,当用户第一次点击“探索”选项卡时,它呈现 ok,但永远不会回到“我的甲板”选项卡。
我还注意到,在/myDeck 或/explore 刷新时,根本不会呈现任何内容。
最佳答案
According to the React Tabs starter template您必须将 IonRouterOutlet
嵌套在 IonTabs
内,该 IonReactRouter
嵌套在其中。
这是他们的 App.tsx 的样子:
<IonApp>
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
<Route path="/tab1" component={Tab1} exact={true} />
<Route path="/tab2" component={Tab2} exact={true} />
<Route path="/tab3" component={Tab3} />
<Route path="/" render={() => <Redirect to="/tab1" />} exact={true} />
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1">
<IonIcon icon={triangle} />
<IonLabel>Tab 1</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/tab2">
<IonIcon icon={ellipse} />
<IonLabel>Tab 2</IonLabel>
</IonTabButton>
<IonTabButton tab="tab3" href="/tab3">
<IonIcon icon={square} />
<IonLabel>Tab 3</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonReactRouter>
</IonApp>
对我来说就是这样。无论如何,Ionic+React 文档对于此类事情并不是很详细。人们仍然需要非常多地搜索。
关于javascript - react + ionic 5 : Tab navigation problems,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60613071/
我很绝望,现在已经两天(!!)天都没有解决方案来解决以下问题。 更新 Lion 后,我想使用最新版本的 rvm 安装额外的 rubies。 这是我之后调用 bundler 时发生的情况: /Users
我的问题: ajax 调用的无限循环会产生问题吗? 假设有这样的代码: ajaxcall(); function ajaxcall(){ jQuery.ajax({ typ
这是一个有趣的小项目,我已经开始尝试并最大限度地提高赢得办公室曲棍球池的机会。我试图找到最好的方法来选择 20 名能够在最高工资帽内给我最多分数的球员。 例如,假设原始数据由 玩家姓名 位置(前锋,后
我有一个总数为540000的数字列表。我想将此列表分为3个列表,每个列表总共180000。最有效的编程方法是这样做,假设数字列表是一个平面文件,每个数字为线? 最佳答案 听起来像Knapsack pr
抱歉,也许因为我不是英语,我不知道,但我找不到解决几个问题的任何资源;也许我用的词不正确.. 我想了解有关 iPhone 4 和 5 不同分辨率的更多信息。 首先:如果我开发针对 iPhone 4 分
在全局配置缓存后,如 docs ,如果我在 app.module 之外使用 CacheInterceptor,它会抛出错误。 app.module.ts const cacheConfig = {
我无法让 g:each 工作。我正在尝试遍历任何内容,但它永远不起作用 = 不生成任何 html。 索引.gsp Item ${i.name} 用户 Controller .g
在我的 XAML 文件中,我有一个这样声明的 ListBox:
想知道你是否可以帮助我: 我有一个名为initializeAll的方法: public final void initializeAll() { //other stuff........ rand
我尝试过使用 XML 和 JAVA 在我的 Android Activity 中创建一个 ImageView。这两次,我都能够获取我一天前创建的所有其他 PNG 资源以显示在 ImageView 中。
我需要你的帮助。这是什么意思? Warning: mysql_query() [function.mysql-query]: Access denied for user 'ODBC'
这是一段代码 function test() { this.value = "foo"; } $(document).ready(function () { test();
这是一些非常基础的东西。渲染期间引发异常:java.util.Locale.toLanguageTag()Ljava/lang/String; XML: 问题似乎出在 Edit
除其他来源外,我还使用 Stackoverflow 上的各种帖子,尝试实现我自己的 PHP 分类器,以将推文分类为正面、中性和负面类别。在编码之前,我需要弄清楚流程。我的思路和例子如下:
在过去的几周里,每当我在 Eclipse 上使用 SVN 插件时,我都会收到以下错误: Certificate Problem There is a problem with the site's s
我被拒绝运行以下功能(位于 /var/www/mysite/public_html/app/Controllers/Script.php) $structure = '/var/www/mysite/
我正在使用 ctags 为我的 Emacs 创建标签以使用 cygwin 从中读取符号。 Emacs 说 “访问标签表缓冲区:文件/home/superman/tags 不是有效的标签表” 这是我查找
我知道作为一种函数式语言,XSL 没有像传统的 for 循环(而是 for-each)那样的东西。 我正在尝试从可变数量的元素开始创建一个具有固定数量 (7) 的表。总之,我有
我正在使用RavenDB进行一些测试,以基于iphone应用程序存储数据。该应用程序将发送一个带有GPS key 的5个GPS坐标的字符串。我在RavenDB中看到每个文档约为664-668字节。这是
我无法理解我的应用程序的行为。我想创建一个简单的窗口 (1000x700px),分为两部分(分别为 250px 和 750px 宽度)。我尝试了以下代码: import java.awt.Color;
我是一名优秀的程序员,十分优秀!