Apply framer-motion to non-functional components

Question

If you want to add framer-motion to a functional component, then add <motion.div ...> to the render method. Easy. But that's not possible in the case of non-functional components. Say I want to add a page-transition effect between the Login component and the anotherPage functional component, how is that done?

Here is some code for reference:

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")
)

Answer 1

It's not an issue of functional & non-functional components. You need to place your AnimatePresence component after Switch. If you place it before the Switch, then your AnimatePresence doesn't aware of the route change.

A workaround could be placing your AnimatePresence at the beginning of each component.

const AnotherPage = () => {
    return (
        <AnimatePresence>
            <h1>another page</h1>
        </AnimatePresence>
    );
};

export default AnotherPage;

export default class Login extends Component {
    constructor() {
        // ...
    }

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

    handleInputChange = (event) => {
        // ...
    }

    render(){
        return (
            <AnimatePresence>
                <h1>login page</h1>
            </AnimatePresence>
        );
    }
}