Ошибка 404 Next.js после обновления страницы

Я пытаюсь изучить 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, мой URL-адрес выглядел '/about/1/' и работал нормально, но если я обновляю страницу, я получаю ошибку 404. Если я набираю в браузере /abouts?id=2" и обновляю страницу, все работает нормально. Ты знаешь, как я могу это исправить? Я хочу иметь ссылки вроде

/about/1/

reactjs routes next.js next routing
person Paweł Baca    schedule 22.10.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Из документации по Next.js:

Второй параметр as для push и replace является необязательным украшением URL-адреса. Полезно, если вы настроили собственные маршруты на сервере.

Итак, чтобы добиться такого поведения, вам нужно настроить пользовательские маршруты внутри вашего server.js - например, используя express. Расширьте свой сервер с помощью этого:

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

const dev = process.env.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}`);
  });
});
person Fabian Schultz    schedule 28.10.2017