Next.js-express 动态路由导致页面重新加载

Posted 2023-02-22

【中文标题】Next.js-express 动态路由导致页面重新加载

【英文标题】：Next.js-express dynamic routing causes page reload

【发布时间】：2019-07-27 14:16:46

【问题描述】：

我有一个使用快速自定义浏览器使用 next js 创建的博客应用程序。当我单击链接以路由到“/blog/article-1”时，它会在到达该页面时刷新页面。如何避免这种情况？

server.js 文件

const express = require('express');
const next = require('next');
const port = 80;
const dev = process.env.NODE_ENV !== 'production';
const app = next( dev );
const handle = app.getRequestHandler();
const compression = require('compression');

app.prepare()
  .then(() => 
    const server = express();
    server.use(compression());
    server.get('/blog', (req, res) => app.render(req, res, '/blog', req.query));
    server.get('/blog/:postslug', (req, res) => 
      const params =  postslug: req.params.postslug 
      return app.render(req, res, '/blog/post', params)
    );

    server.get('*', (req, res) => handle(req, res));

    server.listen(port, (err) => 
      if (err) throw err;
      console.log(`> Ready on http://localhost:$port`);
    );
);

链接到文章的文件

import React,  Fragment  from 'react';
import Link from 'next/link';

export default (props) => 

  return (
    <Fragment>
      <Link href=`/blog/$dynamicPostSlug`>
        <a>
          Go to article
        </a>
      </Link>
    </Fragment>
  );
;

帖子所在的文件

import React,  Component, Fragment  from 'react';
import  withRouter  from 'next/router';
import 'isomorphic-unfetch';

class post extends Component 

  static async getInitialProps( req ) 
    try 
      const res = await fetch(`http://localhost/api/posts/$req.params.postslug`, 
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
      );
      const json = await res.json();
      return  data: json.data ;
     catch (err) 
      console.log('err');
    
  

  render() 
    const  data  = this.props;
    return (
      <Fragment>
        <PostContentComesHere data=data/>
      </Fragment>
    );
  

export default withRouter(post);

I have already checked the next.js docs and it has this implementation which uses the node http module.我通过复制文档示例中的一些部分在 express 上实现了此代码。但是，当我使用 .

转到文章页面时，它似乎仍然会导致页面重新加载

【问题讨论】：

转到文章您是否删除了锚标记并​​尝试？

标签是链接工作所必需的。 github.com/zeit/next.js/#with-link

希望对您有所帮助github.com/zeit/next.js/issues/2833#issuecomment-414919347

【参考方案1】：

替换

<Link 
 href=`/blog/$dynamicPostSlug`>

与

<Link 
 href=`/blog/post?postslug=$dynamicPostSlug` 
 as=`/blog/$dynamicPostSlug`>

getInitialProps 应该从参数而不是 req 中获取查询。

static async getInitialProps( query ) 
    try 
      const res = await fetch(`http://localhost/api/posts/$query.postslug`, 
        method: 'GET', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, cors, *same-origin
      );
      const json = await res.json();
      return  data: json.data ;
     catch (err) 
      console.log('err');
    
  

【讨论】：

嘿。所以这个答案似乎出现了一个新问题。在static async getInitialProps( req ) 方法中，req 参数是未定义的。

@Muljayan 使用 query 而不是 static async getInitialProps( query )

这解决了这个问题吗？仍然在我的侧页刷新。

此解决方案缺少关键部分。 href 必须在动态文件周围包含方括号 []。示例：/blog/[post]?postslug=$dynamicPostSlug

谁能帮我解决这个问题***.com/questions/70211088/…