Reactjs 将帧移动应用于非功能组件

如果要将成帧器运动添加到功能组件，请添加到渲染方法。容易的。但这在非功能组件的情况下是不可能的。假设我想在登录组件和另一个页面功能组件之间添加一个页面转换效果，这是如何实现的

以下是一些代码供参考：

import React from "react"
import ReactDOM from "react-dom"
import { Route, Switch, BrowserRouter} from "react-router-dom";
import { AnimatePresence} from "framer-motion";

const AnotherPage = () => {
    return <h1>another page</h1>
};
class Login extends Component {
    constructor() {
        ...
    }

    handleLogin = async (event) => {
        ...
    }

    handleInputChange = (event) => {
        ...
    }
    render() {
        return (
                <form onSubmit={this.handleLogin}>

                    <input type="text" name="email" 
                           value={this.state.email}
                           onChange={this.handleInputChange}/>

                    <input type="text" name="password"
                           value={this.state.password}
                           onChange={this.handleInputChange}/>

                    <button className="btn" onClick={this.handleLogin}>login</button>
                </form>
        );
    }
};

const Routers = () => {
    return (
            <BrowserRouter>
                <AnimatePresence>
                    <Switch>
                        <Route exact path="/login" component={Login} />
                        <Route exact path="/anotherPage" component={AnotherPage} />
                    </Switch>
                </AnimatePresence>
            </BrowserRouter>
    );
};
ReactDOM.render(
        <React.StrictMode>
            <Routers/>
        </React.StrictMode>,

        document.getElementById("root")
)

从“React”导入React
从“react dom”导入react dom
从“react router dom”导入{Route，Switch，BrowserRouter}；
从“帧运动”导入{AnimatePresence}；
常数另一页=（）=>{
返回另一页
};
类登录扩展组件{
构造函数（）{
...
}
handleLogin=异步（事件）=>{
...
}
handleInputChange=（事件）=>{
...
}
render（）{
返回(
登录
);
}
};
常量路由器=（）=>{
返回(
);
};
ReactDOM.render(
,
document.getElementById（“根”）
)

这不是功能性和非功能性组件的问题。您需要将

AnimatePresence

组件放在

开关之后。如果将其放置在
开关
之前，则您的
动画演示
不会意识到路由更改

一种解决方法是将
AnimatePresence
放在每个组件的开头

const AnotherPage=（）=>{
返回(
另一页
);
};
导出默认的另一页；

导出默认类登录扩展组件{
构造函数（）{
// ...
}
handleLogin=异步（事件）=>{
// ...
}
handleInputChange=（事件）=>{
// ...
}
render（）{
返回(
登录页面
);
}
}