Next.js 通过 <Link> 手动加载页面而不使用 Ajax答案

【问题标题】：Next.js Manually Loads Pages via <Link> Without AjaxNext.js 通过 <Link> 手动加载页面而不使用 Ajax
【发布时间】：2018-07-16 20:38:02
【问题描述】：

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

这是我的服务器的代码：

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 href={item.link}>
  <a>
    {item.title}
  </a>
</Link>

【问题讨论】：

标签： reactjs react-redux react-router next.js i18next

【解决方案1】：

即使服务器正确映射了动态 URL，客户端仍然必须使用以下链接语法才能使其工作（尤其重要的是“as”属性）：

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

【讨论】：