反应路由器 | URL 参数作为变量*没有* useParams？

Question

我目前正在处理 Apollo Odyssey 教程的这一页：https://www.apollographql.com/tutorials/lift-off-part3/the-usequery-hook---with-variables

我在这里得到了一个有趣的认识：Track 组件正在从 URL 参数接收 trackId 属性， 没有 useParams勾。我从未听说过这可能，而且我无法完全概念化 这个程序是如何做到的。我将在下面提供两个相关文件的代码，但可以在此处找到整个存储库：https://github.com/apollographql/odyssey-lift-off-part3

这是怎么发生的？这是我不知道的 React Router 功能吗？

// 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

啊，我真傻。此项目使用 Reach Router，而不是 React Router。容易犯错。