javascript - 使用 Accordion 布局反应路由器转换
问题描述
我正在用 React 重建我的网站。我遇到了反应路由器和反应过渡组的问题。在 react router 文档中,有一个如何创建动画转换的指南。但它附加到某个布局:
nav
- link a
- link b
- link c
container
- body a
- body b
- body c
据我了解,关键点是用TransitionGroup、CSSTransition 和Swtich 包裹所有主体。我或多或少地知道它是如何工作的。过渡组保留先前的路线主体并将其过渡出去。
但正如我已经说过的,这个解决方案附加到这个布局中。
在我的网站上,我有这样的布局:
- link a
- body a (slides down on link click)
- link b
- body b (slides down on link click)
- link c
- body c (slides down on link click)
我的网站参考:https
:
//dmws.me/ 你能建议我这个布局的最佳实践吗?
解决方案
好的,经过大量试验和失败后,我有了一个可行的解决方案。关键在于路由器文档 => 路由渲染方法 => 子
级 https://reacttraining.com/react-router/web/api/Route/children-func
这是我的代码:
<div>
<Link to="/">Home</Link>
<Route
exact
path="/"
children={({ match, ...rest }) => (
<CSSTransition
in={match}
timeout={500}
classNames="foo"
mountOnEnter
unmountOnExit
>
<Home />
</CSSTransition>
)}
/>
<Link to="/about">About</Link>
<Route
path="/about"
children={({ match, ...rest }) => (
<CSSTransition
in={match}
timeout={500}
classNames="foo"
mountOnEnter
unmountOnExit
>
<About />
</CSSTransition>
)}
/>
</div>
推荐阅读
- react-native - 如何在 cljs 中使用反应导航?
- javascript - 如何从对象数组中检索电子邮件字段?
- java - 如何为我的 Web 服务获取 HTML 数据表单?
- php - 替换functions.php里面wordpress父主题的一个函数
- sql - 在 netezza 中使用“创建外部表”命令时无法获取别名
- java - Android Studio:在不同的活动中使用“OnClick”方法?
- node.js - 如何让 discord.js 机器人检测附件
- powershell - 未选择 PowerShell 表单数据网格
- reactjs - Redux store.getState() 返回初始状态
- c++ - 定义自定义结构类型的数组