React Router | URL参数为变量*，不带*useParams

Question

我目前正在阿波罗奥德赛教程的这一页上工作：https://www.apollographql.com/tutorials/lift-off-part3/the-usequery-hook---with-variables

我在这里得到了一个有趣的实现：Track组件正在从URL参数接收trackId道具，没有useParams钩子。我从来没有听说过这是可能的，我也不能完全概念化这个程序是如何实现的。我将在下面提供两个相关文件的代码，但整个repo可以在这里找到：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。容易出错。