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

Question

I have a React context that provides "project" information to child components, and I'd like the keep all things related to project data contained within the context class. An example of this is the "refreshProject" function that retrieves project information from the server. The challenge is: how to pass the projectID, which is a URL param, into the context class? In the code below, I currently pass it into the refresh function itself, which means that all child components that want to call refreshProject need to pull the ID from the URL, which is clumsy. I can think of several approaches to this but I'm curious what would be considered best-practice here.

This is the wrapped route with the project ID contained within the URL:

<Switch>
    [other routes here]

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

And the ProjectContextProvider class looks like:

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>
        );
    }
}

Answer 1

The challenge is: how to pass the projectID , which is a URL param, into the context class?

Of course by context :

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

all child components that want to call refreshProject need to pull the ID from the URL

not true , it can be read from router (props location etc.)

Make context provider outer to router (routes should be a switch direct children)

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

Pass state directly to provider, without spreading (it creates a new object, we want to pass a ref)

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

In <Project/> just mutate directly (usually not advised) projectID in context (not using setState , change not propagated, dependants not rerendered) this.context.projectID = someID; (id from router props), then call this.context.refreshProject() - it's binded then it can use this.state.projectID to make API request. When done updated context (with setState) will force rerenderings (of context connected components).