Question

我想知道如何使用react router v4和react-router-config设置JS（非css）动画。（我使用GSAP处理基本动画）

Answer 1

Found a good example with an almost identical setup。使用Switch组件管理它以使用我的设置（React Transition Group V2，React Router v4和React Router Config）。

由于示例未使用React Router Config和React Router Config默认情况下使用Switch进行编译（如inspect元素＆gt; React选项卡中所示），我手动添加了一个Switch。我这样做的原因是因为在Switch上没有location = {this.props.location}属性，它会将新组件复制为进入AND离开组件。

我很好奇我的硬编码Switch如何否定自动渲染的Switch。

            <TransitionGroup>
                <Transition
                    key={this.props.location.pathname}
                    onEnter={(node) => {
                        console.log(node, 'enter')
                    }}
                    onExit={(node) => {
                        console.log(node, 'exit')
                    }}
                    onExited={() => {
                        console.log('exited')
                    }}
                    timeout={{ enter: 300, exit: 200 }}
                >
                    <Switch location={this.props.location}>
                        {renderRoutes(this.props.route.routes)}
                    </Switch>
                </Transition>
            </TransitionGroup>

Answer 2

您可以在自定义 Link组件上定义动画，如下所示：

<Link
  to="/some-path"
  transition="glide-right"
/>

当然，这条路线还有很多工作要做...

为此提供了一个软件包react-tiger-transition。

它确实使用了 some CSS，但是主要转换由 js 完成，

演示：

demo-gif

PS-我是作者。

Answer 3

我写了一个组件来响应本机。可以将其修改为使用react-spring而不是react native动画包，并可以使用标准react。

https://javascriptrambling.blogspot.com/2020/07/react-router-native-animatedswitch.html

如何使用JS反应路由器v4（与react-router-config）

3 个答案: