在 Next 9 上遇到动态路由问题答案

【问题标题】：Having issues with dynamic routes on Next 9在 Next 9 上遇到动态路由问题
【发布时间】：2019-12-09 01:39:21
【问题描述】：

当我尝试使用 router.query.xxx 访问查询字符串时，我的组件中的 GraphQL 查询未在动态路由上运行。

我有以下文件

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

任何想法为什么会发生这种情况以及如何解决它？

谢谢

【问题讨论】：

您的“我”对象为空或为空，这就是您收到错误的原因。在渲染之前尝试 console.log(me) 看看你需要的一切是否在对象“me”中可用

标签： reactjs graphql next.js prisma prisma-graphql

【解决方案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将查询参数作为道具传递

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

【讨论】：

【解决方案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;

【讨论】：