Question

我尝试学习Next.js，但我的问题很小。这是我的测试代码：

import Link from 'next/link';
export default () => (
    <p>Hallo next <Link href="/abouts?id=2" as='/abouts/1'><a>About</a></Link></p>
)

如果我从index.js页面链接到关于链接，我的网址看起来'/about/1/'并且工作正常，但是如果我刷新页面我得到错误404.如果我输入brwoser /abouts?id=2"并刷新页面一切正常。你知道我怎么解决这个问题吗？我想要像

这样的链接

/about/1/

Answer 1

来自Next.js documentation：

as和push的第二个replace参数是网址的可选装饰。在服务器上配置自定义路由时很有用。

因此，要实现此行为，您需要在server.js内配置自定义路由，例如使用express。使用此扩展您的服务器：

const next = require('next');
const express = require('express');

const dev = NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  // Nice permalinks for pages.
  // Sets up a custom route, that then uses next.js to render the about page.
  server.get('/about/:id', (req, res) => {
    const params = { id: req.params.id };
    return app.render(req, res, '/about', params);
  });

  // For all other routes, use next.js.
  server.get('*', (req, res) => {
    return handle(req, res);
  });

  server.listen(port, '0.0.0.0', err => {
    if (err) throw err;
    console.log(`${'\u2705'}  Ready on http://localhost:${port}`);
  });
});

刷新

1 个答案: