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

Posted 2023-03-08

【中文标题】在 Next 9 上遇到动态路由问题

【英文标题】：Having issues with dynamic routes on 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”中可用

【参考方案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;