页面在使用"历史"后不呈现.push '在Ionic/React中使用' IonTabs '作为嵌套

我有一个Ionic/React v5.0.7应用程序与IonReactRouter管理路由:

// App.tsx
return (
<IonApp>
<IonReactRouter history={history}>
<IonRouterOutlet>
<Route exact path={ROUTES.HOME} component={Home} />
<Route exact path={ROUTES.LOGIN} component={Login} />
<Route path={ROUTES.CONTRACTOR} component={ContractorDashboard} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
)

在我的一条路由(path={ROUTES.CONTRACTOR})中，我试图实现IonTabs，它需要有自己的IonRouterOutlet，所以我将制表符作为嵌套路由，如下所示:

// ContractorDashboard.tsx
<IonContent>
<IonTabs>
<IonTabBar slot="top">
<IonTabButton href="/contractor/overview" tab="contractor-overview">
<IonLabel>{t('ContractorDashboard.contractorOverview')}</IonLabel>
</IonTabButton>
<IonTabButton href="/contractor/contractor-configs" tab="contractor-configs">
<IonLabel>{t('ContractorDashboard.contractorConfig')}</IonLabel>
</IonTabButton>
<IonTabButton href="/contractor/workers-management" tab="workers-management">
<IonLabel>{t('ContractorDashboard.workersManagement')}</IonLabel>
</IonTabButton>
<IonTabButton href="/contractor/email-responses" tab="email-responses">
<IonLabel>Some label</IonLabel>
</IonTabButton>
</IonTabBar>
<IonRouterOutlet>
<Route path="/contractor/contractor-configs" render={() => <ContractorConfigs userId={authUser.uid} />} />
<Route path="/contractor/workers-management" component={WorkersManagement} />
<Route path="/contractor/email-responses" render={() => <EmailResponses userId={authUser.uid} />} />
<Route path="/contractor/contractor-overview" render={() => <IonTitle>Title</IonTitle>} />
<Route exact path="/contractor" render={() => <Redirect to="/contractor/overview" />} />
</IonRouterOutlet>

</IonTabs>
</IonContent>

一切都很好，直到我尝试创建到/contractor路由的动态导航，这是标签路由器的根，使用history.push('/contractor')或<Redirect to="/contractor" />。

在我的登录组件中，如果用户经过身份验证，我想自动重定向到ContractorDashboard。即，在成功登录后，用户应该被重定向到仪表板。我实现了以下内容:

// Login.tsx
useEffect(() => {
if (authUser) {
history.push('/contractor')
}
}, [authUser, history])

发生的是URL在地址栏中发生了变化，但登录页面仍然可见，而不是ContractorDashboard。我还试了这个:

// Login.tsx
if (authUser) {
return <Redirect to="/contractor"/>
}
return (
// ...
)

结果是一样的。我可以在开发工具中看到承包商页面，但它没有渲染。
一些注意事项:

当我尝试不同的事情时，结果有点不同，比如推到/contractor/overview而不是/contractor。然后承包商仪表板可见一秒钟，然后再次进入登录页面。
有时我确实得到了仪表板，但标签不可见。它在DOM中，光标事件在那里，但仍然不可见。
在仪表板中使用IonTabs之前一切正常。
什么是奇怪的是，当我试图导航到登录页面通过地址栏与认证的用户，我被重定向到仪表板，就像我应该和一切都在工作。

我确实尝试从react-router中替换IonReactRouter和Router，就像这个答案中建议的那样。然后从登录页面重定向工作，但标签触发一个完整的页面刷新每次标签的变化，这只是可怕的用户体验。

以下是我的ionic info输出:

Ionic:
Ionic CLI : 6.11.0
Utility:
cordova-res : not installed
native-run  : not installed
System:
NodeJS : v12.18.3
npm    : 6.14.6
OS     : Windows 10

这是我的package.json:

{
"name": "application",
"version": "0.0.1",
"private": true,
"dependencies": {
"@capacitor/android": "^2.4.6",
"@capacitor/core": "2.4.6",
"@ionic/react": "^5.0.7",
"@ionic/react-router": "^5.0.7",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^8.0.3",
"@types/jest": "^24.0.25",
"@types/node": "^12.12.24",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/react-router": "^5.1.4",
"@types/react-router-dom": "^5.1.3",
"firebase": "^8.2.3",
"i18next": "^19.8.4",
"i18next-http-backend": "^1.0.22",
"ionicons": "^5.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-i18next": "^11.8.5",
"react-redux": "^7.2.2",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^4.0.1",
"redux": "^4.0.5",
"redux-localstorage-simple": "^2.3.1",
"redux-thunk": "^2.3.0",
"typescript": "3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"appium": "appium --chromedriver-executable C:\Users\Ori\code\chromedrivers\chromedriver-83-0-4103.exe",
"e2e:android": "protractor e2e/android-e2e.conf.js",
"e2e:web": "protractor e2e/web-e2e.conf.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@capacitor/cli": "2.4.6",
"@types/jasmine": "^3.6.3",
"@types/jasminewd2": "^2.0.8",
"@types/react-redux": "^7.1.15",
"@types/redux-logger": "^3.0.8",
"appium": "^1.20.2",
"jasmine": "^3.6.4",
"jasmine-spec-reporter": "^6.0.0",
"protractor": "^7.0.0",
"redux-logger": "^3.0.6",
"ts-node": "^9.1.1"
},
"description": "An Ionic project"
}

那么，是否有一种方法可以正确地实现这一点，以及如何实现?
如果这里缺少任何信息或代码，请让我知道。
任何帮助都将非常感谢!

所以对于任何感兴趣的人，我放弃了寻找解决方案。相反，我实现了自己的基本选项卡，没有路由(我一直不明白为什么选项卡需要路由…)。
不考虑样式，它很简单:


const [tab, setTab] = useState<number>(0);
const mapTabs = [
'contractorOverview',
'contractorConfigs',
'workersManagement',
'emailResponses'
]
const handleTabChange = () => {
switch (tab) {
case 0: return <h3>Overview</h3>;
case 1: return authUser && <ContractorConfigs userId={authUser.uid} />;
case 2: return <WorkersManagement />;
case 3: return authUser && <EmailResponses userId={authUser.uid} />;
default: return <h3>Overview</h3>;
}
}
return (
// ....
<IonContent>
<IonToolbar color="secondary">
<IonButtons slot="start">
{mapTabs.map((_tab, tabIdx) => (
<IonButton
key={tabIdx}
id={`${_tab}`}
onClick={() => setTab(tabIdx)}
disabled={mapTabs[tab] === _tab}
>
{t(`ContractorDashboard.${_tab}`)}
</IonButton>
))}
</IonButtons>
</IonToolbar>
{handleTabChange()}
</IonContent>
// ....
)

这就是你所需要的工作选项卡视图(同样，如果没有一些样式，它看起来不会那么漂亮)。
如果有人有选项卡问题的解决方案(实际上我不是100%确定是什么导致了这个问题…我无法在stackblitz中复制…)我很想听听。
如果没有，我会把这个作为一个答案…

你试过了吗:

history.push({ pathname: '/contractor' })

或

history.push({ pathname: '/contractor/overview' });

你有没有试过…

history.push('/contractor/overview')

你能在stackblitz或codesandbox上发布一个小项目吗?

在我正在导航的页面的根部有一个组件来修复我的问题。见https://github.com/ionic-team/ionic-framework/issues/19622

相关内容

最新更新

热门标签：