react菜鸟遇到的一个小问题

如你所见，我是个前端菜鸟，正在研究react。目前遇到一个小小的问题，希望掘金里的大佬们帮我解解惑。

用的是react框架

目前，场景是这样的，我希望二级路由切换的时候，这个父组件是先变透明，再切换路由，最后显现出来。

但是问题是

• 是点击子组件里的按钮触发切换路由，子组件又不能控制父组件先变透明；
• 父组件又不能通过react-router-dom的Outlet传一个方法给子组件；
• 如果父组件用useEffect监听路由变化，它就已经先切换了路由

想问问，如果不用状态管理工具或者React的Context，有没有啥好办法能实现

我暂时是这样做的，在父组件这个文件导出一个对象，然后再在父组件里给这个对象添加切换路由的方法，给子组件使用

export const nav = {}

const Main = () => {
  const navigate = useNavigate()
  const [_opacity, setOpacity] = useState(1)
  
  // css样式里写了过渡效果，不是瞬间变透明
  nav.navigateTo = (path) => {
    setOpacity(0)
    setTimeout(() => {
      navigate(path)
      setOpacity(1)
    }, 200)
  }

  return <main
            style={{
              opacity: _opacity
            }}
          >
  <Outlet />
</main>
}

export default Main

这和常规的父传子不太一样，我想问问，这样有什么不妥吗？会导致啥后果吗？