React如何在每次路由切换时触发非路由公共组件的通用逻辑

最优实现方案 #

1. 抽离通用逻辑为自定义Hook #

首先把CommonComponent中封装的校验逻辑抽成独立的自定义Hook，同时引入React Router的useLocation监听路由变化，不需要修改任何原有业务组件：

// hooks/useCommonCheck.js
import { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export default function useCommonCheck() {
  const [canRender, setCanRender] = useState(false)
  const { pathname } = useLocation()

  // 路由切换时自动重新执行通用逻辑
  useEffect(() => {
    // 替换为你原本写在CommonComponent里的通用校验逻辑
    const checkResult = runYourCommonLogic()
    setCanRender(checkResult)
  }, [pathname])

  return canRender
}

2. 封装公共路由容器 #

封装一个全局路由容器组件，统一控制所有路由的渲染权限：

// components/CommonRouteContainer.js
import useCommonCheck from '../hooks/useCommonCheck'
// 如果CommonComponent有UI内容需要渲染，直接引入该组件即可

export default function CommonRouteContainer({ children }) {
  const canRenderBool = useCommonCheck()

  // 校验不通过时可以返回加载态、无权限提示等自定义UI
  if (!canRenderBool) return <div>校验中/无权限访问</div>

  return (
    <div className="container">
      {/* 有需要渲染的CommonComponent UI的话，放在这里即可 */}
      {children}
    </div>
  )
}

3. 改造App.js结构 #

直接用公共容器包裹所有路由即可，不需要调整原有路由配置：

// App.js
import { Route } from 'react-router-dom'
import CommonRouteContainer from './components/CommonRouteContainer'
import Comp1 from './Comp1'
import Comp2 from './Comp2'

function App() {
  return (
    <CommonRouteContainer>
      <Route exact path="/comp1">
        <Comp1 />
      </Route>
      <Route exact path="/comp2">
        <Comp2 />
      </Route>
    </CommonRouteContainer>
  )
}

补充说明 #

如果你不想改动原有CommonComponent的封装，也可以保留组件结构，在CommonComponent内部使用useLocation监听路由变化触发逻辑，再通过Context、Redux等状态管理方案把校验结果的布尔值全局暴露，App组件消费该状态控制路由渲染即可，抽自定义Hook是轻量场景下的最优解。

内容的提问来源于stack exchange，提问作者copenndthagen