Question

我是next.js的新手。我在后端显示页面视图：

module.exports = (server, app) => {
  server.get('/setup', (req, res) => {
    const testData = {
      name: "Test",
      testProp: "testVal",
    };

    return app.render(req, res, '/setup', testData);
  });
};

当我在浏览器中的/setup路由上刷新页面时，可以在getInitialProps中看到数据，这很好。但是，当我从另一条路线导航到/setup路线时，看不到数据。为什么会发生这种情况，如何更改它才能查看数据？这是我的页面代码：

import { withAuth } from '../utils/withAuth';

const Setup = props => {
  console.log(props); // when linking there is no expected data here
  return(
    <div>Setup here</div>
  )
};

Setup.getInitialProps = async ctx => {
  return { ...ctx.query };
};

export default withAuth(Setup);

Answer 1

从其他路线导航时，您未在服务器端进行渲染，因此必须在getInitialProps中从服务器获取数据。

import fetch from 'isomorphic-unfetch'

const Setup = (props) => {
  console.log(props);
  return(
     <div>Setup here</div>
  )
}

Setup.getInitialProps = async (ctx) => {
  if (ctx.req) {
   // server-side
   return { ...ctx.query }
  } else {
   // client-side
   const res = await fetch('API/setup')
   const json = await res.json()
   return { ...json }
  } 
}

Next.js-从其他路线导航时组件中没有数据

1 个答案: