单个子路径动画不正确

Question

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

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

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

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

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

Answer 1

解决方案有点棘手

最后，我不得不创建一个新组件 (Drawer) 来处理动画。然后，将子路由添加到 <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 组件。我在我创建的处理动画的抽屉组件中执行此操作（使用这种方法，不再需要 react-transition-group，我根据抽屉打开与否通过 CSS 设置动画）

Projects.jsx

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

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

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

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

Project.jsx

export default withRouter(Project);

单个子路径动画不正确

Single child route not animating properly

reactjs

react-router-v4

react-router-dom

react-transition-group