React Router | URL parameter as variable *without* useParams?

Question

I'm currently working on this page of the Apollo Odyssey tutorial: https://www.apollographql.com/tutorials/lift-off-part3/the-usequery-hook---with-variables

I came to an interesting realization here: the Track component is receiving the trackId prop from the URL parameters, without the useParams hook. I've never heard of that being possible, and I cannot quite conceptualize how this program is doing it. I'll provide the two relevant file's codes below, but the entire repo can be found here: https://github.com/apollographql/odyssey-lift-off-part3

How is this occurring? Is this a feature of React Router that I'm unaware of?

// track.js
import React from "react";
import { gql, useQuery } from "@apollo/client";
import { Layout, QueryResult } from "../components";
import TrackDetail from "../components/track-detail";

export const GET_TRACK = gql`
  query getTrack($trackId: ID!) {
    track(id: $trackId) {
      id
      title
      author {
        id
        name
        photo
      }
      thumbnail
      length
      modulesCount
      numberOfViews
      modules {
        id
        title
        length
      }
      description
    }
  }
`;

const Track = ({ trackId }) => {
  const { loading, error, data } = useQuery(GET_TRACK, {
    variables: { trackId },
  });

  return (
    <Layout>
      <QueryResult error={error} loading={loading} data={data}>
        <TrackDetail track={data?.track} />
      </QueryResult>
    </Layout>
  );
};

export default Track;

// index.js
import React, { Fragment } from 'react';
import { Router } from '@reach/router';
/** importing our pages */
import Tracks from './tracks';
import Track from './track';

export default function Pages() {
  return (
    <Router primary={false} component={Fragment}>
      <Tracks path="/" />
      <Track path="/track/:trackId" />
    </Router>
  );
}

Answer 1

Ah, silly me. This project uses Reach Router, not React Router. Easy mistake.