React项目中如何全局获取URL ID参数并在Editor.js子组件内使用

方案1：使用React Router内置useParamsHook（推荐，适配React Router v5/v6+，函数组件适用） #

直接在ChecklistTool组件内部调用React Router的内置Hook即可获取路由参数，不需要从上层组件透传props，不受Editor.js嵌套层级限制：

// ChecklistTool组件顶部引入
import { useParams } from 'react-router-dom'

const ChecklistTool = (props) => {
  // 直接获取路由中的id参数
  const { id } = useParams()
  
  // 后续可以直接用id查询MongoDB
  useEffect(() => {
    if (id) {
      // 调用你的查询接口
      fetchChecklistData(id)
    }
  }, [id])
  
  // 原有组件逻辑
  return <div>...</div>
}

方案2：使用withRouter高阶组件（类组件适用） #

如果你的ChecklistTool是类组件无法使用Hook，可以用withRouter包裹组件，直接从props拿到路由参数：

// ChecklistTool组件顶部引入
import { withRouter } from 'react-router-dom'

class ChecklistTool extends React.Component {
  componentDidMount() {
    // 从props拿到id
    const { id } = this.props.match.params
    // 执行查询逻辑
  }
  
  // 原有组件逻辑
}

// 导出时用withRouter包裹
export default withRouter(ChecklistTool)

方案3：原生JS读取URL参数（无依赖，所有场景通用） #

如果以上方案都不适用，直接通过浏览器API读取当前路径解析参数，不需要依赖React Router上下文：

// 可在任意文件直接调用获取id
const getCurrentDocumentId = () => {
  const pathArr = window.location.pathname.split('/')
  const documentIndex = pathArr.findIndex(item => item === 'document')
  return documentIndex !== -1 ? pathArr[documentIndex + 1] : null
}

// ChecklistTool中使用
const id = getCurrentDocumentId()

注意：如果项目存在路由切换不刷新页面的场景，函数组件可以加useEffect监听window.location.pathname变化更新id即可。

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