Next.js在没有Ajax的情况下通过<link />手动加载页面

时间:2018-02-06 17:37:01

标签: reactjs react-router react-redux next i18next

我正在使用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>

1 个答案:

答案 0 :(得分:0)

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

    $('#myTable').on( 'click', 'tfoot th', function () {
        var index = table.column( this ).index(); //index is returned as undefined
   } );