我正在使用nextjs和graphql进行购物概念证明。
我有一个显示产品列表的组件，其中包含指向产品页面的链接

<Link
   as={`${handle}/product/${url}`}
   href={`/product?id=${item.id};`}>
   <a>{item.title}</a>
</Link>

handle是集合名称，因此浏览器中的url看起来像http://localhost:3000/new-releases/product/Plattan-2-Bluetooth，但在幕后它实际上只是使用了一个名为products的页面，我传递的是产品ID。
现在在product.js中（粘贴在下面），我得到id的查询字符串值，并做另一个查询来得到产品。所有的工作都很好，但如果我点击刷新或复制并粘贴URL到一个新的窗口，我得到404。
我知道这是一些与路由，但我不知道我需要做什么来解决这个问题。谢谢

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Query } from 'react-apollo';
import gql from 'graphql-tag';

class product extends Component {
  static async getInitialProps({query}) {
    console.log("query", query)
    return query ? { id: query.id.replace(';', '') } : {}
  }

  render() {

    const PRODUCT_FRAGMENT = gql`
        fragment ProductPage on Product {
          title
          description
          descriptionHtml
          id
          images(first: 10, maxWidth: 600) {
            edges {
              node {
                id
                altText
                originalSrc
              }
            }
          }
        }
      `;

    const PRODUCT_FETCH_QUERY = gql`
      query PRODUCT_FETCH_QUERY {
        node(id: "${this.props.id}") {
          __typename
          ...ProductPage
        } 
      }
      ${PRODUCT_FRAGMENT}
    `;

    return (
      <div>
         <Query query={PRODUCT_FETCH_QUERY}>
              {({ data, error, loading }) => {
                console.log("data", data)
                if (loading) return <p>Loading...</p>
                if (error) return <p>Error: {error.message}</p>
                return null}
              }
            </Query>
      </div>
    );
  }
}

product.propTypes = {

};

export default product;