How to limit animation area for nested AnimatedRoutes?

[dylinmaust]

I have AnimatedRoutes (renamed AnimatedSwitch in my project) in my main App entry point like so:

const App = () => (
  <AnimatedSwitch>
    <Route path="/auth" component={AppUnauth} />
    <Route path="/app" component={AppAuth} />
    <Route path="*" component={NotFound} />
  </AnimatedSwitch>
);

The AppUnauth and AppAuth components have AnimatedSwitches within them as well, and some layouts that should not be animated and instead be static.

const AppUnauth = () => (
  <MyUnauthLayout>
  <Image />
  <AnimatedSwitch>
    <Route path="/auth/login" component={Login} />
    <Route path="/auth/signup" component={Signup} />
  </AnimatedSwitch>
  </MyUnauthLayout>
);

const AppAuth = () => (
  <MyAuthLayout>
  <NavBar />
  <AnimatedSwitch>
    <Route path="/app/test-again" component={TestAgain} />
    <Route path="/app/test" component={Test} />
  </AnimatedSwitch>
  </MyAuthLayout>
);

I'd like to animate changes between routes but limit animation based on the route level if that makes any sense. So if I change between Login and Signup, I don't want to fade in/out the Image component. But if I'm switching between the AppAuth and AppUnauth components, I want the animation to effect the whole page. What's the React way to extend the current AnimatedRoutes functionality to support this nested layout animation?