Next 9 上的动态路由有问题

Question

当我尝试使用 router.query.xxx.

访问查询字符串时，我的组件中的 GraphQL 查询未运行ning 在动态路由上

我有以下文件

// ./pages/section/[slug].js
import { useRouter } from 'next/router';
import AppLayout from '../../components/styles/_AppLayout';

const Section = () => {
  const router = useRouter();
  return <AppLayout>Hi</AppLayout>;
};

export default Section;

页面显示正常，但是当我添加 {router.query.slug} 并刷新页面时，它会给我一个 TypeError，因为 GraphQL 查询不会运行。如下图所示，me.firstName 未定义，因为 GraphQL 查询没有运行

这是_AppLayout.js

中的代码

import styled from 'styled-components';
import Navigation from '../Navigation';
const Wrapper = styled.div`...`;
const AppLayout = props => {
  return (
    <Wrapper>
      <Navigation />
      <main>{props.children}</main>
    </Wrapper>
  );
};
export default AppLayout;

知道为什么会发生这种情况以及如何解决它吗？

谢谢

Answer 1

我可以通过两种方式解决我的问题

使用withRouter

import { withRouter } from 'next/router';
import TestComponent from '../../components/TestComponent';
import AppLayout from '../../components/styles/_AppLayout';
const Section = props => {
  return <AppLayout>Hi {props.query.slug}</AppLayout>;
};
export default withRouter(Section);

并通过 getInitialProps

将查询参数作为 props 传递

const Section = ({slug}) => {
  return <AppLayout>Hi {slug}</AppLayout>;
};
Section.getInitialProps = async ({ query }) => {
  const { slug } = query;
  return { slug };
};
export default Section;

Answer 2

下面的方法对我有用，我正在使用带有上下文的 React Hooks，我还需要使用它的 nextJS 路由，所以可以遵循以下配置。

注意：如果您使用的是 GraphQL，那么它也可以包含在 _app.js

中的最终 JSX 中

_app.js:

import { withRouter } from "next/router";

BuilderProvider 在这里是 Context Provider

   const InjectRouterContext = withRouter(({ router, children }) => {
      return <BuilderProvider value={router}>{children}</BuilderProvider>;
    });


class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <InjectRouterContext>
        <ApolloProvider client={client}>
          <Component {...pageProps} />
        </ApolloProvider>
      </InjectRouterContext>
    );
  }
}

现在在页面中，这里是 somepage.js:

import { useRouter } from "next/router";

    const somepage = () => {

      const router = useRouter();
      const { id } = router.query;

    return (//JSX Here);
    }

    somepage.getInitialProps = async ({ query }) => {
      const { slug } = query;
      return { slug };
    };
    export default somepage;

Next 9 上的动态路由有问题

Having issues with dynamic routes on Next 9

reactjs

graphql

next.js

prisma

prisma-graphql