0

我正在为一个项目使用 React 路由器。我想为位于父路由内的单个路由设置动画（基本上，单个项目将在项目列表顶部显示为“模态”，因此父路由的内容需要在子路由时保持不变可见。

路由现在可以正常工作，但是在制作动画时会遇到困难。我记得在某个时候看到过一个例子，其中一个 sidenav 被动画化为一条路线，但我现在在任何地方都找不到它......

示例代码：https ://codesandbox.io/s/1447zpvlzj

当前行为：我正在关注反应路由器教程 中的示例当在示例中向 like 添加键时，应用程序会在路由更改时中断。当键被移除时，路由会改变，但不会发生转换（进入和退出类不会添加到路由中）。

我还尝试将路由包装在 div 而不是 Switch 中。这实际上给了我一个适当的过渡。但是，退出转换会中断，因为路由内容（包装器 div 内的内容）实际上会在退出转换超时完成之前消失

4

1 回答 1

0

解决方案最终有点棘手

最后，我不得不创建一个新组件（抽屉）来处理动画。然后，将子路由添加到<Switch>并将其指向父组件，如下所示：

应用程序.jsx

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/projects/:slug" component={Projects} />
    <Route path="/projects" component={Projects} />
    <Route component={NotFound} />
</Switch>

这意味着无论我点击/projects或/projects/foo，都会加载相同的 Projects 组件。

然后，在我的 Projects 组件中，我根据 slug 的存在有条件地渲染单个 Project 组件。我在我创建的处理动画的 Drawer 组件中执行此操作（使用这种方法，react-transition-group不再需要，我通过 CSS 根据 Drawer 是否打开来制作动画）

项目.jsx

render() {
  const renderProject = !!this.props.match.slug;

  return (
    <div className="projects">
      [projects content here]
      <Drawer isOpen={renderProject}>
        <Project />
      </Drawer>
    <div>
  )
};

这允许 slugged 路由存在于父路由中，同时在 slug 出现时仍由 Drawer 组件设置动画。

最后，我使用withRouter提供的 HOCreact-router-dom来包装导出的<Project>组件，以便它可以完全利用路由器。

项目.jsx

export default withRouter(Project);
于 2018-03-09T12:18:22.583 回答