Question

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

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

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

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

我也尝试用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组件。

然后，在我的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>
  )
};

这允许被阻塞的路线存在于父路线中，同时当slug出现时仍然由Drawer组件设置动画。

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

<强> Project.jsx

export default withRouter(Project);

单个子路线没有正确动画

1 个答案: