单个子路线未正确设置动画答案

【问题标题】：Single child route not animating properly单个子路线未正确设置动画
【发布时间】：2018-08-17 18:36:36
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： reactjs react-router-v4 react-router-dom react-transition-group

【解决方案1】：

解决方案有点棘手

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

App.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 组件中，我根据 slug 的存在有条件地渲染单个 Project 组件。我在我创建的处理动画的 Drawer 组件中执行此操作（使用这种方法，不再需要 react-transition-group，我根据 Drawer 是否打开通过 CSS 进行动画处理）

Projects.jsx

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

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

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

最后，我使用react-router-dom提供的withRouter HOC封装了导出的<Project>组件，这样它就可以完全利用路由器了。

Project.jsx

export default withRouter(Project);

【讨论】：