An example React component which uses React Router's match object to grab a url parameter

exampleUsingRouterMatch.js

import React from "react";
import { withRouter } from "react-router";
import ScreenHeader from "../../components/UI/ScreenHeader";
import Error from "../../components/UI/Error";
import Loading from "../../components/UI/Loading";
import { useQuery } from "@apollo/react-hooks";
import { GET_PROJECT } from "../../components/Project/project.query";

const ScreensProject = ({ match }) => {
  const { id } = match.params;
  const { loading, error, data } = useQuery(GET_PROJECT, {
    variables: { projectId: id }
  });

  if (loading) return <Loading />;
  if (error) return <Error error={error} />;

  return (
    <div>
      {data.project && (
        <>
          <ScreenHeader
            title={data.project.title}
            description="The following is a list of all active Ingest Sheets for a project"
          />
          ...
        </>
      )}
    </div>
  );
};

export default withRouter(ScreensProject);