node.js - 使用 express 在 Nextjs 中刷新页面丢失查询字符串

Question

我对 nextjs 有疑问，但没有任何解决方案对我有帮助!!!我想在我的 SSR 项目中使用动态路由，在本地主机上一切正常，但是当我尝试将它上传到服务器时，或者我的 IIS 问题显示在:问题在于，一开始从服务器呈现时一切正常，刷新页面后我丢失了查询字符串并发生未定义错误。这是我的代码:

服务器.js:

const express = require("express");
const next = require("next");
const port = process.env.PORT || 3003;

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get("/", (req, res) => {
    return app.render(req, res, "/index");
  });

  server.get("/test?org&des&roomRules&departing&returning", (req, res) => {
    return app.render(req, res, "/test" , {
      org: req.query.org ,
      des: req.query.des,
      roomRules:req.query.roomRules,
      departing: req.query.departing,
      returning: req.query.returning,
    });
  });

  server.get("*", (req, res) => {
    return handle(req, res);
  });
  server.listen(port, err => {
    if (err) throw err;
    console.log(`READY ON  http://localhost:${port}`);
  });
});

父组件:

const RoundButton = props => {
  const { searchParams , name} = props;
  const URL2 = `/test?org=${searchParams.org}&des=${searchParams.des}&roomRules=${searchParams.roomRules}&departing=${searchParams.orgDate}&returning=${searchParams.desDate}`;
  return (
    <Link  href={URL2} as={URL2}>
      Test
    </Link>
  );
};

测试组件:

function Test(props) {
  return (
    <div>
      <h1>Test</h1>
      <h2>roomrules :{props.queryStrings}</h2>
    </div>
  )
}

Test.getInitialProps =  ({query}) => {
  const queryStrings =  query;
  return {
     queryStrings: queryStrings 
  };    
};

export default Test

如您所见，我使用了 getInitialProps，它只适用于第一次渲染。

最后是我在 package.json 中的脚本:

"scripts": {
  "dev": "node server.js",
  "build": "next build && next export",
  "start": " node server.js"
},

为了发布，我在 cmd 中写了“npm run build”。有什么解决办法吗？

Answer 1

当您使用下一个 js 时，您可以使用以下方法使 URL 参数在刷新时持久化:假设您有一个名为 TestComponent 的组件:

TestComponent.getInitialProps = async (context: any) => {
  const { oid } = context.query;
  return { id: oid };
};

oid是你希望在页面刷新后持久化的参数，而不是undefined。

export default function TestComponent(props: any) {
     props.id
}

这是您在源代码中使用的方法，另一种方法如下:

export default function TestComponent(props: any){
  const router = useRouter();
  const { oid } = router.query;
}

现在您可以访问 oid 并为 useEffect 函数使用以下方法:

export default function TestComponent(props: any){
      const router = useRouter();
      const { oid } = router.query;
      useEffect(function(){
       }, [oid])
    }

使用此设置，您的代码也应该适用于 Refresh，请考虑如果您有多个调用从服务器获取数据，您必须精确检查多个请求。