Javascript 将路径参数传递给React上下文提供程序

我有一个React上下文，它向子组件提供“项目”信息，我希望将与项目数据相关的所有内容都包含在上下文类中。例如，从服务器检索项目信息的“refreshProject”函数。挑战是：如何将projectID（一个URL参数）传递到上下文类中？在下面的代码中，我当前将其传递到刷新函数本身，这意味着所有要调用refreshProject的子组件都需要从URL中提取ID，这很笨拙。我可以想出几种方法来解决这个问题，但我很好奇这里的最佳实践是什么

这是URL中包含项目ID的已包装路由：

<Switch>
    [other routes here]

    <ProjectContextProvider>
        <AuthenticatedRoute path="/project/:id" exact component={Project} props={childProps} />
    </ProjectContextProvider>
</Switch>

[其他路线在此]

ProjectContextProvider类如下所示：

import React, { Component, createContext } from 'react';
import { API } from '../Services'

export const ProjectContext = createContext();

export class ProjectContextProvider extends Component {
    constructor(props) {
        super(props);

        this.refresh = this.refresh.bind(this);

        this.state = {
            project: null,
            refreshProject: this.refresh
        }
    }

// This is what I have
    refresh(projectID) {
        API.getProject(projectID).then(project => {
            this.setState({ project });
        });
    }

// This is what I want
//    refresh() {
//        API.getProject(this.projectID).then(project => {
//            this.setState({ project });
//        });
//    }

    render() {
        return (
            <ProjectContext.Provider value={{...this.state}}>
                {this.props.children}
            </ProjectContext.Provider>
        );
    }
}

import React，{Component，createContext}来自'React'；
从“../Services”导入{API}
export const ProjectContext=createContext（）；
导出类ProjectContextProvider扩展组件{
建造师（道具）{
超级（道具）；
this.refresh=this.refresh.bind（this）；
此.state={
项目：空，
refreshProject:this.refresh
}
}
//这就是我所拥有的
刷新（projectID）{
getProject（projectID）.then（project=>{
this.setState（{project}）；
});
}
//这就是我想要的
//刷新（）{
//API.getProject（this.projectID）。然后（project=>{
//this.setState（{project}）；
//        });
//    }
render（）{
返回(
{this.props.children}
);
}
}

挑战是：如何将projectID（一个URL参数）传递到上下文类中

当然，根据上下文：

    this.state = {
        projectID: null,
        project: null,
        refreshProject: this.refresh
    }

要调用refreshProject的所有子组件都需要从URL中提取ID

不正确，可从路由器读取（道具位置等）

使上下文提供程序位于路由器外部（路由应为交换机直接子级）

[其他路线在此]

将状态直接传递给提供者，而不扩散（它创建了一个新对象，我们希望传递一个ref）

{this.props.children}

在

中，只需在上下文中直接变异（通常不建议）

projectID

（不使用

setState

，更改不会传播，依赖项不会重新命名）

this.context.projectID=someID（来自路由器道具的id），然后调用
this.context.refreshProject（）
-它已绑定，然后可以使用
this.state.projectID
发出API请求。完成后，更新的上下文（使用setState）将强制重新命名（上下文连接的组件）

<ProjectContextProvider>
  <Switch>
    [other routes here]
    <AuthenticatedRoute path="/project/:id" exact component={Project} props={childProps} />
  </Switch>
</ProjectContextProvider>

<ProjectContext.Provider value={this.state}>
  {this.props.children}
</ProjectContext.Provider>