Динамическая маршрутизация Next.js-Express вызывает перезагрузку страницы - PullRequest
Новая
       9

Динамическая маршрутизация Next.js-Express вызывает перезагрузку страницы

1 голос
/ 06 марта 2019

У меня есть приложение для блога, созданное с помощью 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);

Я уже проверил документы next.js, и у нее есть эта реализация, использующая модуль http узла. Я реализовал этот код в экспрессе, скопировав некоторые части из примера документации. Тем не менее, по-видимому, это вызывает перезагрузку страницы, когда я перехожу на страницу статьи, используя.

1 Ответ

2 голосов
/ 06 марта 2019

Заменить 

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

с 

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

getInitialProps должен получать запрос из параметров вместо запроса. 

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');
    }
  }
...