Next.js 通过 <Link> 手动加载页面而没有 Ajax

Question

我正在使用 Next.js（使用 Redux、react-i18next、样式化组件和 Express）并且 Next.js 在没有 AJAX 的情况下加载我的页面（使用硬加载，没有 in-放置内容替换）。不幸的是，我无法确定问题所在。控制台（浏览器和服务器）没有错误。你们中有人知道如何调试此问题或有关于此问题的有用提示吗？

这是我服务器的代码：

const express = require('express');
const next = require('next');
const {parse} = require('url');
const i18nextMiddleware = require('i18next-express-middleware');
const Backend = require('i18next-node-fs-backend');
const i18n = require('../hoc/i18n');

const port = parseInt(process.env.APP_PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({dev});
const handle = app.getRequestHandler();

// init i18next with server-side settings
// using i18next-express-middleware
i18n.use(Backend).use(i18nextMiddleware.LanguageDetector).init({
  preload: ['en', 'de'],
  ns: ['common', 'home', 'content'],
  backend: {
    loadPath: __dirname + '/../locales/{{lng}}/{{ns}}.json',
    addPath: __dirname + '/../locales/{{lng}}/{{ns}}-missing.json',
    jsonIndent: 2
  }
}, () => {
  app.prepare().then(() => {
    const server = express();

    // Translation routing
    server.use(i18nextMiddleware.handle(i18n));
    server.use('/locales', express.static(__dirname + '/../locales'));
    server.post('/locales/add/:lng/:ns', i18nextMiddleware.missingKeyHandler(i18n));

    // Application Routing
    server.get('*', (req, res) => {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true);
      const {pathname, query} = parsedUrl;

      if (pathname.startsWith('/_next')) {
        return handle(req, res, parsedUrl);
      } else if (pathname === '/') {
        return app.render(req, res, '/', query);
      } else {
        return app.render(req, res, '/content', query);
      }
    });

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

link 本身是用

创建的

<Link href={item.link}>
  <a>
    {item.title}
  </a>
</Link>

Answer 1

即使服务器正确映射动态 URL，客户端仍然必须使用以下 link 语法才能使其工作（特别重要的是 "as" 属性):

<Link href={'/content'} as={'/the-real-url'}>
  <a>Test Link</a>
</Link>

Next.js 通过 <Link> 手动加载页面而没有 Ajax

Next.js Manually Loads Pages via <Link> Without Ajax

i18next

reactjs

react-router

react-redux

next.js